Tab Style 5

  • Sofia
  • Luis
  • Elena

Pattern HTML

<!-- wp:group {"metadata":{"name":"tabs"},"align":"full","className":"tabs-section","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|100"}}},"backgroundColor":"five","layout":{"type":"constrained","contentSize":"1116px"}} --> <div class="wp-block-group alignfull tabs-section has-five-background-color has-background" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--100)"><!-- wp:essential-blocks/advanced-tabs {"blockId":"eb-advanced-tabs-6gw42","blockMeta":{"desktop":".eb-advanced-tabs-6gw42.eb-advanced-tabs-wrapper \u003e *{position:relative}.eb-advanced-tabs-6gw42.eb-advanced-tabs-wrapper{display:flex;flex-direction:column;transition:all .5s,background 0.5s,border 0.5s,border-radius 0.5s,box-shadow 0.5s}.eb-advanced-tabs-6gw42.eb-advanced-tabs-wrapper:before{transition:all .5s,background 0.5s,opacity 0.5s,filter 0.5s}.eb-advanced-tabs-6gw42.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=\u0022eb-advanced-tabs-6gw42\u0022]{display:flex;list-style-type:none;flex-wrap:wrap;margin:0;padding:0;flex-direction:row;transition:border 0.5s,border-radius 0.5s,box-shadow 0.5s,background 0.5s}.eb-advanced-tabs-6gw42.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=\u0022eb-advanced-tabs-6gw42\u0022] li{display:flex;justify-content:center;align-items:center;cursor:pointer;text-align:center;position:relative;flex:1;flex-direction:row;gap:0px;transition:all .5s,background 0.5s,border 0.5s,border-radius 0.5s,box-shadow 0.5s}.eb-advanced-tabs-6gw42.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=\u0022eb-advanced-tabs-6gw42\u0022] li .tab-title-wrap{text-align:left}.eb-advanced-tabs-6gw42.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=\u0022eb-advanced-tabs-6gw42\u0022] li .tabIcon{display:flex;justify-content:center;align-items:center;// width:0px;// height:0px;font-size:0px;color:var(\u002d\u002deb-global-heading-color)}.eb-advanced-tabs-6gw42.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=\u0022eb-advanced-tabs-6gw42\u0022] li img{height:auto;width:0px}.eb-advanced-tabs-6gw42.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=\u0022eb-advanced-tabs-6gw42\u0022] li .tab-title-text{margin:0;padding:0;color:#000000;font-family:\u0022EB Garamond\u0022,serif;font-size:30px;font-weight:700;text-transform:none}.eb-advanced-tabs-6gw42.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=\u0022eb-advanced-tabs-6gw42\u0022] li .tab-subtitle-text{display:block;margin:0;padding:0;color:var(\u002d\u002deb-global-text-color);font-size:12px;margin-top:5px}.eb-advanced-tabs-6gw42.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=eb-advanced-tabs-6gw42] li.active{transition:border 0.5s,border-radius 0.5s,box-shadow 0.5s,background 0.5s}.eb-advanced-tabs-6gw42.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=eb-advanced-tabs-6gw42] li.active span,.eb-advanced-tabs-6gw42.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=eb-advanced-tabs-6gw42] li.active i{color:var(\u002d\u002deb-global-background-color)}.eb-advanced-tabs-6gw42.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=eb-advanced-tabs-6gw42] li.active .tab-title-text{color:#000000}.eb-advanced-tabs-6gw42.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=eb-advanced-tabs-6gw42] li.active .tab-subtitle-text{color:var(\u002d\u002deb-global-background-color)}.eb-advanced-tabs-6gw42.eb-advanced-tabs-wrapper .eb-tabs-contents{flex:1}.eb-advanced-tabs-6gw42.eb-advanced-tabs-wrapper .eb-tabs-contents .eb-tab-wrapper[data-tab-parent-id=\u0022eb-advanced-tabs-6gw42\u0022]{background-color:var(\u002d\u002deb-global-background-color)}","tab":"","mobile":""},"align":"","tabTitles":[{"text":"Sofia","id":"1","media":"icon","icon":"fas fa-home","image":"","isExpanded":true,"isDefault":true,"customId":"","enableSubtitle":false,"subtitle":""},{"text":"Luis","id":"2","media":"icon","icon":"fas fa-home","enableSubtitle":false,"subtitle":""},{"text":"\u003cstrong\u003eElena\u003c/strong\u003e","id":"3","media":"icon","icon":"fas fa-home","enableSubtitle":false,"subtitle":""}],"textColor":"#000000","actTextColor":"#000000","showCaret":false,"title_FontFamily":"EB Garamond","title_FontSource":"custom","title_FontSize":30,"title_FontWeight":"700","title_TextTransform":"none","subtitle_FontSource":"custom","iconZ_Range":0,"iconGap_Range":0,"wrpBg_backgroundColor":"","ttlBg_backgroundColor":"","actTlBg_backgroundColor":"","conBg_backgroundColor":"var(\u002d\u002deb-global-background-color)","wrpBds_Rds_Top":"","wrpBds_Rds_Right":"","wrpBds_Rds_Bottom":"","wrpBds_Rds_Left":"","ttlBds_Bdr_Top":"","ttlBds_Bdr_Right":"","ttlBds_Bdr_Bottom":"","ttlBds_Bdr_Left":"","ttlBds_Rds_Top":"","ttlBds_Rds_Right":"","ttlBds_Rds_Bottom":"","ttlBds_Rds_Left":"","conBds_borderStyle":"none","conBds_Rds_Top":"","conBds_Rds_Right":"","conBds_Rds_Bottom":"","conBds_Rds_Left":"","ttlWBds_Rds_Top":"","ttlWBds_Rds_Right":"","ttlWBds_Rds_Bottom":"","ttlWBds_Rds_Left":"","wrpM_Top":"","wrpM_Right":"","wrpM_Bottom":"","wrpM_Left":"","wrpP_Top":"","wrpP_Right":"","wrpP_Bottom":"","wrpP_Left":"","ttlP_isLinked":false,"ttlP_Top":"","ttlP_Right":"","ttlP_Bottom":"","ttlP_Left":"","ttlM_Top":"","ttlM_Right":"","ttlM_Bottom":"","ttlM_Left":"","conM_Top":"","conM_Right":"","conM_Bottom":"","conM_Left":"","conP_isLinked":true,"conP_Top":"","conP_Right":"","conP_Bottom":"","conP_Left":"","ttlWM_Top":"","ttlWM_Right":"","ttlWM_Bottom":"","ttlWM_Left":"","ttlWP_Top":"","ttlWP_Right":"","ttlWP_Bottom":"","ttlWP_Left":"","iconP_Top":"","iconP_Right":"","iconP_Bottom":"","iconP_Left":"","className":"toggle-area","commonStyles":{"desktop":".eb-parent-eb-advanced-tabs-6gw42{display:block}.root-eb-advanced-tabs-6gw42{position:relative}.root-eb-advanced-tabs-6gw42.eb_liquid_glass-effect1{background-color:#FFFFFF1F;backdrop-filter:blur(24px)}.root-eb-advanced-tabs-6gw42.eb_liquid_glass-effect2{background-color:#FFFFFF1F;backdrop-filter:blur(24px) brightness(1)}.root-eb-advanced-tabs-6gw42.eb_liquid_glass_shadow-effect1{border-width:1px;border-color:#FFFFFF1F;border-style:solid;border-radius:24px}.root-eb-advanced-tabs-6gw42.eb_liquid_glass-effect1 \u003e .eb-parent-wrapper \u003e div{background:transparent}","tab":".eb-parent-eb-advanced-tabs-6gw42{display:block}","mobile":".eb-parent-eb-advanced-tabs-6gw42{display:block}"},"animationData":{"style":"none"}} --> <div class="wp-block-essential-blocks-advanced-tabs toggle-area root-eb-advanced-tabs-6gw42"><div class="eb-parent-wrapper eb-parent-eb-advanced-tabs-6gw42 "><div class="eb-advanced-tabs-6gw42 eb-advanced-tabs-wrapper horizontal" data-min-height="true"><div class="eb-tabs-nav"><ul class="tabTitles" data-tabs-ul-id="eb-advanced-tabs-6gw42"><li data-title-tab-id="1" data-title-custom-id="" class="active"><i icon="fas fa-home" class="fas fa-home tabIcon"></i><div class="tab-title-wrap"><h6 class="tab-title-text">Sofia</h6></div></li><li data-title-tab-id="2" class="inactive"><i icon="fas fa-home" class="fas fa-home tabIcon"></i><div class="tab-title-wrap"><h6 class="tab-title-text">Luis</h6></div></li><li data-title-tab-id="3" class="inactive"><i icon="fas fa-home" class="fas fa-home tabIcon"></i><div class="tab-title-wrap"><h6 class="tab-title-text"><strong>Elena</strong></h6></div></li></ul></div><div class="eb-tabs-contents"><!-- wp:essential-blocks/tab {"blockId":"eb-tab-9cjk7","tabId":"1","tabParentId":"eb-advanced-tabs-6gw42","lock":{"move":false,"remove":false}} --> <div class="eb-tab-wrapper" data-tab-id="1" data-tab-parent-id="eb-advanced-tabs-6gw42"><div class="eb-tab-inner"><!-- wp:group {"metadata":{"name":"Sofi"},"backgroundColor":"one","layout":{"type":"constrained"}} --> <div class="wp-block-group has-one-background-color has-background"><!-- wp:columns {"metadata":{"name":"Row"},"style":{"spacing":{"blockGap":{"left":"var:preset|spacing|50"}}}} --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"39%","className":"mobile-align-center"} --> <div class="wp-block-column is-vertically-aligned-center mobile-align-center" style="flex-basis:39%"><!-- wp:image {"id":2469,"sizeSlug":"full","linkDestination":"none","className":"is-style-default"} --> <figure class="wp-block-image size-full is-style-default"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/10/763408951.jpg" alt="" class="wp-image-2469"/></figure> <!-- /wp:image --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"top"} --> <div class="wp-block-column is-vertically-aligned-top"><!-- wp:group {"metadata":{"name":"Content"},"layout":{"type":"constrained"}} --> <div class="wp-block-group"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|two"}}}},"textColor":"two"} --> <p class="has-two-color has-text-color has-link-color"><strong>Sofia</strong> is stuck in overdrive. For as long as she can remember, she’s been the reliable one – the person everyone else turns to. But lately, the pressure is starting to catch up to her. Every day, she drags herself out of bed, goes to meetings, checks off items from her to-do list, and people think she’s fine. But they can’t see that inside, she’s exhausted, irritable, and starting to wonder if she even wants this life she’s worked so hard to build. At night, she lies awake, endlessly second-guessing every conversation and decision from the previous day. She wishes she could connect with herself and others, but feels trapped.</p> <!-- /wp:paragraph --></div> <!-- /wp:group --></div> <!-- /wp:column --></div> <!-- /wp:columns --></div> <!-- /wp:group --></div></div> <!-- /wp:essential-blocks/tab --> <!-- wp:essential-blocks/tab {"blockId":"eb-tab-kv0sh","tabId":"3","tabParentId":"eb-advanced-tabs-6gw42"} --> <div class="eb-tab-wrapper" data-tab-id="3" data-tab-parent-id="eb-advanced-tabs-6gw42"><div class="eb-tab-inner"><!-- wp:columns {"metadata":{"name":"Elena"},"style":{"spacing":{"blockGap":{"left":"var:preset|spacing|50"}}}} --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"39%","className":"mobile-align-center"} --> <div class="wp-block-column is-vertically-aligned-center mobile-align-center" style="flex-basis:39%"><!-- wp:image {"id":2469,"sizeSlug":"full","linkDestination":"none","className":"is-style-default"} --> <figure class="wp-block-image size-full is-style-default"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/10/763408951.jpg" alt="" class="wp-image-2469"/></figure> <!-- /wp:image --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"top"} --> <div class="wp-block-column is-vertically-aligned-top"><!-- wp:group {"metadata":{"name":"Content"},"layout":{"type":"constrained"}} --> <div class="wp-block-group"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|two"}}}},"textColor":"two"} --> <p class="has-two-color has-text-color has-link-color"><strong>Elena</strong> isn’t sure how to move on. This spring, her husband of 30 years passed away without warning, leaving her struggling to make sense of things. In a moment, her entire world was turned upside-down. Everything she counted on for security and stability suddenly disappeared, and with it, her very sense of self. She’d defined herself as part of a couple for such a long time that the truth was she didn’t know who she was on her own. Now, the future that once felt so well-defined and full of promise fills her with an unspeakable sense of dread. She wonders if the best years of her life are all behind her.</p> <!-- /wp:paragraph --></div> <!-- /wp:group --></div> <!-- /wp:column --></div> <!-- /wp:columns --></div></div> <!-- /wp:essential-blocks/tab --> <!-- wp:essential-blocks/tab {"blockId":"eb-tab-4cmle","tabId":"2","tabParentId":"eb-advanced-tabs-6gw42"} --> <div class="eb-tab-wrapper" data-tab-id="2" data-tab-parent-id="eb-advanced-tabs-6gw42"><div class="eb-tab-inner"><!-- wp:columns {"metadata":{"name":"Luis"},"style":{"spacing":{"blockGap":{"left":"var:preset|spacing|50"}}}} --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"39%","className":"mobile-align-center"} --> <div class="wp-block-column is-vertically-aligned-center mobile-align-center" style="flex-basis:39%"><!-- wp:image {"id":2469,"sizeSlug":"full","linkDestination":"none","className":"is-style-default"} --> <figure class="wp-block-image size-full is-style-default"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/10/763408951.jpg" alt="" class="wp-image-2469"/></figure> <!-- /wp:image --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"top"} --> <div class="wp-block-column is-vertically-aligned-top"><!-- wp:group {"metadata":{"name":"Content"},"layout":{"type":"constrained"}} --> <div class="wp-block-group"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|two"}}}},"textColor":"two"} --> <p class="has-two-color has-text-color has-link-color"><strong>Luis</strong> can’t forget what happened. He worked hard to get where he is in life. As a child of immigrants, he was the first person in his family to reach this level of success, and he feels the weight of that responsibility every day. So, he avoids conflict, pushes himself harder, and ignores the pain that lives deep inside him. But, no matter how hard he tries to move on, his mind and body still remember those painful things he wishes he could just forget. Disturbing memories flood over him without warning. Lately, he feels so on edge that it seems easier to just shut down and hide from the world.</p> <!-- /wp:paragraph --></div> <!-- /wp:group --></div> <!-- /wp:column --></div> <!-- /wp:columns --></div></div> <!-- /wp:essential-blocks/tab --></div></div></div></div> <!-- /wp:essential-blocks/advanced-tabs --></div> <!-- /wp:group -->

Pattern CSS

/* Toggle section --------------------------------------------- */ .tabs-section{ position: relative; } .tabs-section::after { content: ''; width: 385px; height: 650px; position: absolute; right: 0; bottom: -100px; background: url(assets/images/dots.png) no-repeat; background-size: 100% 100%; z-index: 9; } #site-container .toggle-area .tabTitles li { margin-right: 3px; } #site-container .toggle-area .tabTitles li { border-radius: 0; background: url(/wp-content/uploads/2025/11/normal.png) no-repeat; min-width: 160px; min-height: 160px; margin-right: 20px; flex: auto; padding: 17px 57px; display: flex; align-items: center; justify-content: center; padding: 0; } #site-container .toggle-area .tabTitles li.inactive .tab-title-text { color: var(--wp--preset--color--one); } .tabs-section .wp-block-column:first-child{ position: relative; } #site-container .toggle-area .tabTitles li.active .tab-title-text { color: var(--wp--preset--color--two); } #site-container .toggle-area .tabTitles li.active{ background: url(/wp-content/uploads/2025/11/active.png) no-repeat; min-width: 160px; min-height: 160px; } #site-container .toggle-area .eb-tabs-nav { max-width: 520px; margin: 0 auto 32px; z-index: 9; } #site-container .toggle-area .tabTitles li .tab-title-text { text-align: center; } #site-container .toggle-area .tabTitles li:last-of-type { margin-right: auto; } #site-container .toggle-area .eb-tabs-contents { border-radius: 20px; background: #FFF; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); margin-top: -115px; z-index: 1; } #site-container .toggle-area .eb-tabs-contents .eb-tab-wrapper { background-color: transparent; } #site-container .toggle-area .eb-tab-inner { padding: 134px 70px 80px 80px; margin: 0; background-color: transparent !important; } #site-container .toggle-area .eb-tab-inner p { font-size: 21px; font-weight: 300; } #site-container .toggle-area .eb-tab-inner p strong { font-weight: 700; } @media only screen and (max-width: 980px){ #site-container .toggle-area .tabTitles { flex-direction: column; gap: 15px; } #site-container .toggle-area .eb-tabs-contents { margin-top: 0; } }