Therapist Tabs 2

Ubaid Rasheed

Lorem*
Lorem*
Lorem*
Lorem*

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Pattern HTML

<!-- wp:group {"metadata":{"name":"Tabs"},"className":"tabs-area","style":{"spacing":{"padding":{"top":"var:preset|spacing|100","bottom":"var:preset|spacing|100"}}},"layout":{"type":"constrained","contentSize":"892px"}} -->
<div class="wp-block-group tabs-area" style="padding-top:var(--wp--preset--spacing--100);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:row;background-color:rgba(255,255,255,0.6);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:column;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:flex-start;align-items:center;cursor:pointer;text-align:center;position:relative;flex:1;flex-direction:row;margin-bottom:20px;padding-top:3px;padding-right:12px;padding-left:12px;padding-bottom:3px;gap:10px;background-color:#FFFFFF;border-radius:10px;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:79px;// height:79px;font-size:79px;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:79px}.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-size:16px;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{background-color:#4972AA;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: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-subtitle-text{color:var(\u002d\u002deb-global-background-color)}.eb-advanced-tabs-6gw42.eb-advanced-tabs-wrapper .eb-tabs-contents{flex:1}","tab":"","mobile":".eb-advanced-tabs-6gw42.eb-advanced-tabs-wrapper{flex-direction:column}.eb-advanced-tabs-6gw42.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=\u0022eb-advanced-tabs-6gw42\u0022]{flex-direction:row}"},"align":"","layout":"vertical","tabTitles":[{"text":"Lorem*","id":"1","media":"image","icon":"fas fa-home","image":"","isExpanded":true,"isDefault":true,"customId":"","enableSubtitle":false,"subtitle":"","imgId":2279,"imgUrl":"https://patterndev.upthinksolutions.com/wp-content/uploads/2025/10/2473263361.jpg"},{"text":"Lorem*","id":"2","media":"image","icon":"fas fa-home","enableSubtitle":false,"subtitle":"","imgId":2279,"imgUrl":"https://patterndev.upthinksolutions.com/wp-content/uploads/2025/10/2473263361.jpg"},{"text":"Lorem*","id":"3","media":"image","icon":"fas fa-home","enableSubtitle":false,"subtitle":"","imgId":2279,"imgUrl":"https://patterndev.upthinksolutions.com/wp-content/uploads/2025/10/2473263361.jpg"},{"text":"Lorem*","id":"4","media":"image","icon":"fas fa-home","enableSubtitle":false,"subtitle":"","imgId":2279,"imgUrl":"https://patterndev.upthinksolutions.com/wp-content/uploads/2025/10/2473263361.jpg"}],"tabChildCount":4,"enableResponsiveLayout":true,"textColor":"#000000","showCaret":false,"titleAlign":"flex-start","title_FontSource":"custom","title_FontWeight":"","title_TextTransform":"none","subtitle_FontSource":"custom","iconZ_Range":79,"wrpBg_backgroundColor":"rgba(255,255,255,0.6)","ttlBg_backgroundColor":"#FFFFFF","actTlBg_backgroundColor":"#4972AA","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":"10","ttlBds_Rds_Right":"10","ttlBds_Rds_Bottom":"10","ttlBds_Rds_Left":"10","actTlBds_Rds_Top":"","actTlBds_Rds_Right":"","actTlBds_Rds_Bottom":"","actTlBds_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":"","iconBds_Rds_Top":"","iconBds_Rds_Right":"","iconBds_Rds_Bottom":"","iconBds_Rds_Left":"","wrpM_Top":"","wrpM_Right":"","wrpM_Bottom":"","wrpM_Left":"","wrpP_Top":"","wrpP_Right":"","wrpP_Bottom":"","wrpP_Left":"","ttlP_isLinked":false,"ttlP_Top":"3","ttlP_Right":"12","ttlP_Bottom":"3","ttlP_Left":"12","ttlM_isLinked":false,"ttlM_Top":"","ttlM_Right":"","ttlM_Bottom":"20","ttlM_Left":"","conM_isLinked":false,"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}","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 vertical" 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"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/10/2473263361.jpg"/><div class="tab-title-wrap"><h6 class="tab-title-text">Lorem*</h6></div></li><li data-title-tab-id="2" class="inactive"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/10/2473263361.jpg"/><div class="tab-title-wrap"><h6 class="tab-title-text">Lorem*</h6></div></li><li data-title-tab-id="3" class="inactive"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/10/2473263361.jpg"/><div class="tab-title-wrap"><h6 class="tab-title-text">Lorem*</h6></div></li><li data-title-tab-id="4" class="inactive"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/10/2473263361.jpg"/><div class="tab-title-wrap"><h6 class="tab-title-text">Lorem*</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":true}} -->
<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":"Tab 1"},"style":{"border":{"width":"10px"}},"backgroundColor":"five","borderColor":"one","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-one-border-color has-five-background-color has-background" style="border-width:10px"><!-- wp:paragraph -->
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2278,"sizeSlug":"full","linkDestination":"none","className":"is-style-round-corners"} -->
<figure class="wp-block-image size-full is-style-round-corners"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/10/2473263361-2.jpg" alt="" class="wp-image-2278"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div></div>
<!-- /wp:essential-blocks/tab -->

<!-- wp:essential-blocks/tab {"blockId":"eb-tab-ruqxc","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:group {"metadata":{"name":"Tab 2"},"style":{"border":{"width":"10px"}},"backgroundColor":"five","borderColor":"one","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-one-border-color has-five-background-color has-background" style="border-width:10px"><!-- wp:paragraph -->
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2278,"sizeSlug":"full","linkDestination":"none","className":"is-style-round-corners"} -->
<figure class="wp-block-image size-full is-style-round-corners"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/10/2473263361-2.jpg" alt="" class="wp-image-2278"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div></div>
<!-- /wp:essential-blocks/tab -->

<!-- wp:essential-blocks/tab {"blockId":"eb-tab-qcgst","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:group {"metadata":{"name":"Tab 3"},"style":{"border":{"width":"10px"}},"backgroundColor":"five","borderColor":"one","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-one-border-color has-five-background-color has-background" style="border-width:10px"><!-- wp:paragraph -->
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2278,"sizeSlug":"full","linkDestination":"none","className":"is-style-round-corners"} -->
<figure class="wp-block-image size-full is-style-round-corners"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/10/2473263361-2.jpg" alt="" class="wp-image-2278"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div></div>
<!-- /wp:essential-blocks/tab -->

<!-- wp:essential-blocks/tab {"blockId":"eb-tab-upuwv","tabId":"4","tabParentId":"eb-advanced-tabs-6gw42"} -->
<div class="eb-tab-wrapper" data-tab-id="4" data-tab-parent-id="eb-advanced-tabs-6gw42"><div class="eb-tab-inner"><!-- wp:group {"metadata":{"name":"Tab 4"},"style":{"border":{"width":"10px"}},"backgroundColor":"five","borderColor":"one","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-one-border-color has-five-background-color has-background" style="border-width:10px"><!-- wp:paragraph -->
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2278,"sizeSlug":"full","linkDestination":"none","className":"is-style-round-corners"} -->
<figure class="wp-block-image size-full is-style-round-corners"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/10/2473263361-2.jpg" alt="" class="wp-image-2278"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div></div>
<!-- /wp:essential-blocks/tab --></div></div></div></div>
<!-- /wp:essential-blocks/advanced-tabs --></div>
<!-- /wp:group -->

Pattern CSS

/*
Tabs section
--------------------------------------------- */

#site-container .tabs-area .tabTitles {
	margin-right: -50px;
	position: relative;
	z-index: 9;
	padding-top: var(--wp--preset--spacing--70);
}

#site-container .tabs-area .tabTitles li {
	min-width: 262px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

#site-container .tabs-area .tabTitles img {
	border-radius: 100%;
}

#site-container .tabs-area .tab-title-text {
	font-family: var(--wp--preset--font-family--two);
	font-size: var(--wp--preset--font-size--heading-3);
}

#site-container .tabs-area .eb-tab-inner {
	margin-top: 0;
}

body .tabs-area .wp-block-group {
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.10);
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
	padding-left: var(--wp--preset--spacing--110);
	padding-right: var(--wp--preset--spacing--70);
}

body .tabs-area p strong {
	font-size: var(--wp--preset--font-size--heading-3);
	line-height: 1;
}

@media only screen and (max-width: 980px) {

	#site-container .tabs-area .tabTitles {
		margin-right: auto;
		padding-top: 0;
		display: block;
		max-width: 350px;
		margin-left: auto;
	}

	#site-container .tabs-area .tabTitles li {
		min-width: 0;
	}

	body .tabs-area .wp-block-group {
		padding: var(--wp--preset--spacing--30);
	}

}