JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div id="tabs-container">
    <ul class="tabs-menu">
        <li class="current"><a href="#tab-1">Transition</a></li>
        <li><a href="#tab-2">Network Defense</a></li>
        <li><a href="#tab-3">Innovation</a></li>
        <li><a href="#tab-4">Partnerships</a></li>
    </ul>
    <div class="tab">
        <div id="tab-1" class="tab-content">
            <p>Execute a smooth and effective transition to NGEN, with minimal disruption to the Fleet.</p>
        </div>
        <div id="tab-2" class="tab-content">
            <p>Support successful operations and defense of the network. </p>
        
        </div>
        <div id="tab-3" class="tab-content">
            <p>Continue to enhance existing capability while we plan the future network architecture. </p>
        </div>
        <div id="tab-4" class="tab-content">
            <p>Continue to develop an effective program team with our mission partners and the service provider. </p>
        </div>
    </div>
</div>

CSS

#tabs-container {
    padding: 20px;
    margin-left: 8%;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
    font-size: 14px;  
    width: 80%;
}

.tabs-menu {
    height: 30px;
    float: left;
    clear: both;
}

.tabs-menu li {
    height: 30px;
    line-height: 30px;
    margin-right: 10px;
    background-color: #3e628f;
    border-top: 1px solid #3e628f;
    border-left: 1px solid #3e628f;
    border-bottom: 1px solid #3e628f;
}

.tabs-menu li.current {
    position: relative;
    background-color: #fff;
    border-right: 1px solid #fff;
    z-index: 5;
}

.tabs-menu li a {
    padding: 10px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none; 
}

.tabs-menu .current a {
    color: #3e628f;
}

.tab {
  border: 1px solid #3e628f;
  background-color: #fff;
  float: left;
  margin-bottom: 20px;
  width: 80%;
  margin-left: 160px;
  margin-top: -30px;
  height: 127px;
}
.tab-content {
    width: 96%;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 10px;
    padding-bottom: 10px;
    display: none;
}

#tab-1 {
 display: block;   
}

JavaScript

$(document).ready(function() {
    $(".tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
});