Tabs Style 1

Talha Aziz

Item 1 Lorem Ipsum
Item 1 Lorem Ipsum
Item 1 Lorem Ipsum

Lorem Ipsum Quidam Noctis

Lorem ipsum color sit amet, consectetur adipiscing elit. Corbi ut ligula at pus faceless sollicitudin quis vitae anteur. Vivamus consequat tempus molestie. In hac habitasse platea dictumst. Nullam a tortor odio. Ut eleifend nibh urna, non maximus eros pulvinar a. Quisque et faucibus quam. Phasellus ultricies et nisi et consequat. Lorem ipsum color sit amet, consectetur adipiscing elit. Corbi ut ligula at pus faceless.

Vivamus consequat tempus molestie. In hac habitasse plata dictumst. Nullam a tortor odi lorem ipsum color sit amet.
Vivamus consequat tempus molestie. In hac habitasse plata dictumst. Nullam a tortor odi lorem ipsum color sit amet.
Vivamus consequat tempus molestie. In hac habitasse plata dictumst. Nullam a tortor odi lorem ipsum color sit amet.

Lorem Ipsum Quidam Noctis

Vivamus consequat tempus molestie. In hac habitasse plata dictumst. Nullam a tortor odi lorem ipsum color sit amet.
Vivamus consequat tempus molestie. In hac habitasse plata dictumst. Nullam a tortor odi lorem ipsum color sit amet.
Vivamus consequat tempus molestie. In hac habitasse plata dictumst. Nullam a tortor odi lorem ipsum color sit amet.

Lorem Ipsum Quidam Noctis

Vivamus consequat tempus molestie. In hac habitasse plata dictumst. Nullam a tortor odi lorem ipsum color sit amet.
Vivamus consequat tempus molestie. In hac habitasse plata dictumst. Nullam a tortor odi lorem ipsum color sit amet.
Vivamus consequat tempus molestie. In hac habitasse plata dictumst. Nullam a tortor odi lorem ipsum color sit amet.

The above block is copied from the site: https://ronaldmcdon597.wpenginepowered.com/page-title/

Pattern HTML

<!-- wp:group {"metadata":{"name":"Wedge Bar"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:0"><!-- wp:essential-blocks/advanced-tabs {"blockId":"eb-advanced-tabs-d03g9","blockMeta":{"desktop":".eb-advanced-tabs-d03g9.eb-advanced-tabs-wrapper \u003e *{position:relative}.eb-advanced-tabs-d03g9.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-d03g9.eb-advanced-tabs-wrapper:before{transition:all .5s,background 0.5s,opacity 0.5s,filter 0.5s}.eb-advanced-tabs-d03g9.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=\u0022eb-advanced-tabs-d03g9\u0022]{display:flex;list-style-type:none;flex-wrap:wrap;margin:0;padding:0;flex-direction:row;margin-bottom:40px;transition:border 0.5s,border-radius 0.5s,box-shadow 0.5s,background 0.5s}.eb-advanced-tabs-d03g9.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=\u0022eb-advanced-tabs-d03g9\u0022] li{display:flex;justify-content:center;align-items:center;cursor:pointer;text-align:center;position:relative;flex-direction:row;margin-top:0px;margin-right:10px;margin-left:10px;margin-bottom:0px;padding-top:10px;padding-right:15px;padding-left:15px;padding-bottom:10px;gap:10px;background-color:#F0F4F9;border-top-width:0px;border-right-width:0px;border-left-width:0px;border-bottom-width:0px;border-color:#333648;border-style:solid;border-radius:5px;transition:all .5s,background 0.5s,border 0.5s,border-radius 0.5s,box-shadow 0.5s}.eb-advanced-tabs-d03g9.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=\u0022eb-advanced-tabs-d03g9\u0022] li:hover{background-color:#5170A8}.eb-advanced-tabs-d03g9.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=\u0022eb-advanced-tabs-d03g9\u0022] li .tabIcon{display:flex;justify-content:center;align-items:center;width:18px;height:18px;font-size:18px;color:var(\u002d\u002deb-global-heading-color)}.eb-advanced-tabs-d03g9.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=\u0022eb-advanced-tabs-d03g9\u0022] li img{height:auto;width:18px}.eb-advanced-tabs-d03g9.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=\u0022eb-advanced-tabs-d03g9\u0022] li .tab-title-text{margin:0;padding:0;color:var(\u002d\u002deb-global-heading-color);font-family:\u0022Raleway\u0022,sans-serif;font-size:17px;font-weight:500}.eb-advanced-tabs-d03g9.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=\u0022eb-advanced-tabs-d03g9\u0022] li:hover .tab-title-text{color:#FFFFFF}.eb-advanced-tabs-d03g9.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=eb-advanced-tabs-d03g9] li.active{background-color:#5170A8;transition:border 0.5s,border-radius 0.5s,box-shadow 0.5s,background 0.5s}.eb-advanced-tabs-d03g9.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=eb-advanced-tabs-d03g9] li.active:hover{background-color:#F0F4F9}.eb-advanced-tabs-d03g9.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=eb-advanced-tabs-d03g9] li.active span,.eb-advanced-tabs-d03g9.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=eb-advanced-tabs-d03g9] li.active i{color:var(\u002d\u002deb-global-background-color)}.eb-advanced-tabs-d03g9.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=eb-advanced-tabs-d03g9] li.active .tab-title-text{color:#FFFFFF}.eb-advanced-tabs-d03g9.eb-advanced-tabs-wrapper .eb-tabs-nav ul.tabTitles[data-tabs-ul-id=eb-advanced-tabs-d03g9] li.active:hover .tab-title-text{color:#333333}.eb-advanced-tabs-d03g9.eb-advanced-tabs-wrapper .eb-tabs-contents{flex:1}.eb-advanced-tabs-d03g9.eb-advanced-tabs-wrapper .eb-tabs-contents .eb-tab-wrapper[data-tab-parent-id=\u0022eb-advanced-tabs-d03g9\u0022]{padding-top:50px;padding-right:70px;padding-left:70px;padding-bottom:60px;background-color:#EFF0F7}","tab":"","mobile":""},"tagName":"h5","tabTitles":[{"text":"Item 1 Lorem Ipsum","id":"1","media":"none","icon":"fas fa-home","image":"","isExpanded":true,"isDefault":true,"customId":""},{"text":"Item 1 Lorem Ipsum","id":"2","media":"none","icon":"fas fa-home","image":"","isExpanded":false,"isDefault":false,"customId":""},{"text":"Item 1 Lorem Ipsum","id":"3","media":"none","icon":"fas fa-home","image":"","isExpanded":false,"isDefault":false,"customId":""}],"isMediaOn":false,"isFillTitle":false,"hvTextColor":"#FFFFFF","actTextColor":"#FFFFFF","actHvTextColor":"#333333","showCaret":false,"title_FontFamily":"Raleway","title_FontSource":"custom","title_FontSize":17,"title_FontWeight":"500","ttlBg_bg_hoverType":"hover","ttlBg_backgroundColor":"#F0F4F9","hov_ttlBg_backgroundColor":"#5170A8","actTlBg_bg_hoverType":"hover","actTlBg_backgroundColor":"#5170A8","hov_actTlBg_backgroundColor":"#F0F4F9","conBg_backgroundColor":"#EFF0F7","wrpBds_Rds_Top":"","wrpBds_Rds_Right":"","wrpBds_Rds_Bottom":"","wrpBds_Rds_Left":"","ttlBds_borderColor":"#333648","ttlBds_borderStyle":"solid","ttlBds_Bdr_isLinked":false,"ttlBds_Bdr_Top":"0","ttlBds_Bdr_Right":"0","ttlBds_Bdr_Bottom":"0","ttlBds_Bdr_Left":"0","ttlBds_Rds_Top":"5","ttlBds_Rds_Right":"5","ttlBds_Rds_Bottom":"5","ttlBds_Rds_Left":"5","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":"","wrpM_Top":"","wrpM_Right":"","wrpM_Bottom":"","wrpM_Left":"","wrpP_Top":"","wrpP_Right":"","wrpP_Bottom":"","wrpP_Left":"","ttlP_isLinked":false,"ttlP_Right":"15","ttlP_Left":"15","ttlM_isLinked":false,"ttlM_Top":"0","ttlM_Right":"10","ttlM_Bottom":"0","ttlM_Left":"10","conM_Top":"","conM_Right":"","conM_Bottom":"","conM_Left":"","conP_Top":"50","conP_Right":"70","conP_Bottom":"60","conP_Left":"70","ttlWM_isLinked":false,"ttlWM_Top":"","ttlWM_Right":"","ttlWM_Bottom":"40","ttlWM_Left":"","ttlWP_Top":"","ttlWP_Right":"","ttlWP_Bottom":"","ttlWP_Left":"","commonStyles":{"desktop":".eb-parent-eb-advanced-tabs-d03g9{display:block}.root-eb-advanced-tabs-d03g9{position:relative}","tab":".eb-parent-eb-advanced-tabs-d03g9{display:block}","mobile":".eb-parent-eb-advanced-tabs-d03g9{display:block}"}} -->
<div class="wp-block-essential-blocks-advanced-tabs alignwide  root-eb-advanced-tabs-d03g9"><div class="eb-parent-wrapper eb-parent-eb-advanced-tabs-d03g9 "><div class="eb-advanced-tabs-d03g9 eb-advanced-tabs-wrapper horizontal" data-min-height="true"><div class="eb-tabs-nav"><ul class="tabTitles" data-tabs-ul-id="eb-advanced-tabs-d03g9"><li data-title-tab-id="1" data-title-custom-id="" class="active"><h5 class="tab-title-text">Item 1 Lorem Ipsum</h5></li><li data-title-tab-id="2" data-title-custom-id="" class="inactive"><h5 class="tab-title-text">Item 1 Lorem Ipsum</h5></li><li data-title-tab-id="3" data-title-custom-id="" class="inactive"><h5 class="tab-title-text">Item 1 Lorem Ipsum</h5></li></ul></div><div class="eb-tabs-contents"><!-- wp:essential-blocks/tab {"blockId":"eb-tab-zn4kj","tabId":"1","tabParentId":"eb-advanced-tabs-d03g9","lock":{"move":false,"remove":true}} -->
<div class="eb-tab-wrapper" data-tab-id="1" data-tab-parent-id="eb-advanced-tabs-d03g9"><div class="eb-tab-inner"><!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"blockGap":"var:preset|spacing|15"}}} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:heading {"level":5} -->
<h5 class="wp-block-heading">Lorem Ipsum Quidam Noctis</h5>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Lorem ipsum color sit amet, consectetur adipiscing elit. Corbi ut ligula at pus faceless sollicitudin quis vitae anteur. Vivamus consequat tempus molestie. In hac habitasse platea dictumst. Nullam a tortor odio. Ut eleifend nibh urna, non maximus eros pulvinar a. Quisque et faucibus quam. Phasellus ultricies et nisi et consequat. Lorem ipsum color sit amet, consectetur adipiscing elit. Corbi ut ligula at pus faceless.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:list {"className":"is-style-checkmark-list"} -->
<ul class="wp-block-list is-style-checkmark-list"><!-- wp:list-item -->
<li>Vivamus consequat tempus molestie. In hac habitasse plata dictumst. Nullam a tortor odi lorem ipsum color sit amet.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Vivamus consequat tempus molestie. In hac habitasse plata dictumst. Nullam a tortor odi lorem ipsum color sit amet.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Vivamus consequat tempus molestie. In hac habitasse plata dictumst. Nullam a tortor odi lorem ipsum color sit amet.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:essential-blocks/tab -->

<!-- wp:essential-blocks/tab {"blockId":"eb-tab-crcl8","tabId":"2","tabParentId":"eb-advanced-tabs-d03g9"} -->
<div class="eb-tab-wrapper" data-tab-id="2" data-tab-parent-id="eb-advanced-tabs-d03g9"><div class="eb-tab-inner"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|15"}}} -->
<div class="wp-block-column"><!-- wp:heading {"level":5} -->
<h5 class="wp-block-heading">Lorem Ipsum Quidam Noctis</h5>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Lorem ipsum color sit amet, consectetur adipiscing elit. Corbi ut ligula at pus faceless sollicitudin quis vitae anteur. Vivamus consequat tempus molestie. In hac habitasse platea dictumst. Nullam a tortor odio. Ut eleifend nibh urna, non maximus eros pulvinar a. Quisque et faucibus quam. Phasellus ultricies et nisi et consequat. Lorem ipsum color sit amet, consectetur adipiscing elit. Corbi ut ligula at pus faceless.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:list {"className":"is-style-arrow"} -->
<ul class="wp-block-list is-style-arrow"><!-- wp:list-item -->
<li>Vivamus consequat tempus molestie. In hac habitasse plata dictumst. Nullam a tortor odi lorem ipsum color sit amet.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Vivamus consequat tempus molestie. In hac habitasse plata dictumst. Nullam a tortor odi lorem ipsum color sit amet.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Vivamus consequat tempus molestie. In hac habitasse plata dictumst. Nullam a tortor odi lorem ipsum color sit amet.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:essential-blocks/tab -->

<!-- wp:essential-blocks/tab {"blockId":"eb-tab-lvbxr","tabId":"3","tabParentId":"eb-advanced-tabs-d03g9"} -->
<div class="eb-tab-wrapper" data-tab-id="3" data-tab-parent-id="eb-advanced-tabs-d03g9"><div class="eb-tab-inner"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|15"}}} -->
<div class="wp-block-column"><!-- wp:heading {"level":5} -->
<h5 class="wp-block-heading">Lorem Ipsum Quidam Noctis</h5>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Lorem ipsum color sit amet, consectetur adipiscing elit. Corbi ut ligula at pus faceless sollicitudin quis vitae anteur. Vivamus consequat tempus molestie. In hac habitasse platea dictumst. Nullam a tortor odio. Ut eleifend nibh urna, non maximus eros pulvinar a. Quisque et faucibus quam. Phasellus ultricies et nisi et consequat. Lorem ipsum color sit amet, consectetur adipiscing elit. Corbi ut ligula at pus faceless.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:list {"className":"is-style-arrow"} -->
<ul class="wp-block-list is-style-arrow"><!-- wp:list-item -->
<li>Vivamus consequat tempus molestie. In hac habitasse plata dictumst. Nullam a tortor odi lorem ipsum color sit amet.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Vivamus consequat tempus molestie. In hac habitasse plata dictumst. Nullam a tortor odi lorem ipsum color sit amet.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Vivamus consequat tempus molestie. In hac habitasse plata dictumst. Nullam a tortor odi lorem ipsum color sit amet.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:essential-blocks/tab --></div></div></div></div>
<!-- /wp:essential-blocks/advanced-tabs --></div>
<!-- /wp:group -->