JSFiddle - React, Tailwind, and code Playground

by Salustiano Silva

HTML

<div class="container">
     <h1>teste</h1>

    <ul class="tabs">
        <li><a href="#tab1">1</a>

        </li>
        <li><a href="#tab2">2</a>

        </li>
        <li><a href="#tab3">3</a>

        </li>
        <li><a href="#tab4">4</a>

        </li>
        <li><a href="#tab5">5</a>

        </li>
    </ul>
    <div class="tab_container">
    <div id="tab1" class="tab_content">
      Conteúdo da tab 1
    </div>
    <div id="tab2" class="tab_content">
      Conteúdo da tab 2
    </div>
    <div id="tab3" class="tab_content">
      Conteúdo da tab 3
    </div>
    <div id="tab4" class="tab_content">
      Conteúdo da tab 4
    </div>
    <div id="tab5" class="tab_content">
      Conteúdo da tab 5
    </div>
    </div>
</div>

CSS

.container {
    width: 500px;
    margin: 10px auto;
}
ul.tabs, ul.tabs li {
    margin: 0;
    padding: 0;
}
ul.tabs {
    display:block;
    list-style: none;
    height: 32px;
    border: 1px solid #999;
    background-color:#f2f2f2;
}
ul.tabs li {
    display:inline-block;
    height: 32px;
    width: 32px;
    line-height:32px;
    text-align:center;
}
ul.tabs li a {
    text-decoration: none;
    outline:0 none;
    display: inline-block;
    text-indent:-9999px;
    overflow:hidden;
    width:14px;
    height:14px;
    border: 1px solid #ccc;
    background-color:#fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
ul.tabs a:hover, ul.tabs .active > a {
    background: red;
    border-color:transparent;
    -webkit-box-shadow: inset 0px -2px 4px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: inset 0px -2px 4px 0px rgba(0, 0, 0, 0.75);
    box-shadow: inset 0px -2px 4px 0px rgba(0, 0, 0, 0.75);
}
.tab_container {
    border: 1px solid #999;
    border-top: none;
    background: #fff;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}
.tab_content {
    padding: 20px;
    font-size: 1.2em;
}
.tab_content h2 {
    font-weight: normal;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ddd;
    font-size: 1.8em;
}
.tab_content h3 a {
    color: #254588;
}
.tab_content img {
    float: left;
    margin: 0 20px 20px 0;
    border: 1px solid #ddd;
    padding: 5px;
}

JavaScript

$(document).ready(function () {

    $(".tab_content").hide();

    $(".tabs li:first").addClass("active").show();
    $(".tab_content:first").show();

    $("ul.tabs li").click(function (e) {
        e.preventDefault();

        var $this = $(this);

        $(".tabs .active").removeClass("active");
        $(".tab_content").hide();

        var activeTab = $this.addClass("active").find("a").attr("href");
        $(activeTab).fadeIn();
    });
});