JSFiddle - React, Tailwind, and code Playground

by Artem Borovikov

HTML

<div class="tabs-wrapper">
    <ul class="tabs-list">
        <li class="tab-item">
            tab 1
        </li>
        <li class="tab-item">
            tab 2
        </li>
        <li class="tab-item">
            tab 3
        </li>
    </ul>
    
    <div class="tabs-content">
        <div class="tab-content">
            content for 1 tab
        </div>
        <div class="tab-content">
            content for 2 tab
        </div>
        <div class="tab-content">
            content for 3 tab
        </div>
    </div>
</div>

<div class="accordion-wrapper">
    <div class="accordion-block">
        <div class="tab-item">
            tab 1
        </div>
        
        <div class="tab-content">
            content for 1 tab
        </div>
    </div>
    
    <div class="accordion-block">
        <div class="tab-item">
            tab 2
        </div>
        
        <div class="tab-content">
            content for 2 tab
        </div>
    </div>
    
    <div class="accordion-block">
        <div class="tab-item">
            tab 3
        </div>
        
        <div class="tab-content">
            content for 3 tab
        </div>
    </div>
</div>

CSS

.tabs-wrapper {
    width: 300px;
    float: left;
    margin-right: 15px;
}

.tabs-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tabs-list .tab-item {
    display: inline-block;
    padding: 5px;
    background-color: #eee;
}

.tabs-content {
    background: #000;
    color: #fff;
}


.accordion-wrapper {
    float: left;
    width: 300px;
    background-color: green;
}
.accordion-wrapper .accordion-block {
    margin: 15px 0;
}

.accordion-wrapper .tab-item {
    background-color: #eee;
}

.accordion-wrapper .tab-content {
    background: #000;
    color: #fff;
}