JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div class="demo">
        <ul class="tabs">
            <li><a href="#tab1">Header1</a></li>
            <li><a href="#tab2">Header2</a></li>
        </ul>
        <div class="tabContent">
            <div id="tab1" class="tabBody">content for header1</div>
            <div id="tab2" class="tabBody">content for header2</div>
        </div>
    </div>

CSS

*{
            margin: 0;
            padding: 0;
        }
        
        body {
            margin: 0;
            padding: 40px 100px;
        }
        .demo {
            width: 220px;
            margin: 0 auto;
        }
        /*tabs header*/
        .tabs {
            margin: 0;
            padding: 0;
            float: left;
            list-style: none;
            height: 32px;
            border-bottom: 1px solid #999;
            border-left: 1px solid #999;
            width: 100%;
        }
        .tabs li {
            float: left;
            margin: 0;
            padding: 0;
            height: 31px;
            line-height: 31px;
            border: 1px solid #999;
            border-left: none;
            margin-bottom: -1px;
            overflow: hidden;
            position: relative;
            background: #e0e0e0;
        }
        .tabs a {
            text-decoration: none;
            color: #000;
            display: block;
            font-size: 1.2em;
            padding: 0 10px;
            border: 1px solid #fff;
            outline: none;
        }
        .tabs a:hover {
            background: #ccc;
        }
        .tabs li.active,
        .tabs li.active a:hover {
            background: #fff;
            border-bottom: 1px solid #fff;
        }
        /*tabs content css*/
        .tabContent {
            border: 1px solid #999;
            border-top: none;
            overflow: hidden;
            clear: both;
            float: left;
            width: 100%;
            background: #fff;
        }
        .tabBody {
            padding: 20px;
            font-size: 1.2em;
        }

JavaScript

$(document).ready(function(){
            $('.tabBody:not(:first)').hide();
            $('.tabs li:first').addClass('active');
            $('.tabs li').click(function(){
                $(this).addClass('active').siblings('li.active').removeClass('active');
                $('.tabBody').hide();
                var activeTab = $(this).find('a').attr('href');
                $(activeTab).fadeIn('slow');
                return false;
            });
        });