JSFiddle - React, Tailwind, and code Playground

by Harsh Bhatnagar

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div> <a href="#tab1">Tab1</a>
    <br /><a href="#tab2">Tab2</a>
    <hr />Above links are not working
    <hr />
</div>
<div class="flat-form">
    <ul class="tabs">
        <li> <a href="#tab1" class="active">Tab1 </a>

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

        </li>
    </ul>
    <div id="tab1" class="form-action show">Hello1</div>
    <div id="tab2" class="form-action hide">Hello2</div>
</div>

CSS

/*//////////////  Tabed Content //////////////////// */
 .flat-form {
    background: #cd6a60;
    color:#dfdfdf;
    width: 100%;
    padding-bottom:20px;
    position: relative;
    font-family: Verdana;
}
.tabs {
    background: #c0392b;
    height: 40px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%;
    position: relative;
    display: block;
    margin-bottom: 20px;
}
.tabs li {
    display:inline-block;
    white-space:nowrap;
    float: left;
    margin: 0;
    padding: 0;
}
.tabs a {
    background: #c0392b;
    display: block;
    float: left;
    text-decoration: none;
    color: white;
    font-size: 16px;
    padding: 12px 22px 12px 22px;
    /*border-right: 1px solid @tab-border;*/
}
.tabs li:last-child a {
    border-right: none;
    width: 174px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}
.tabs a.active {
    background: #cd6a60;
    border-right: none;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
.form-action {
    padding: 0 20px;
    position: relative;
}
.form-action h1 {
    font-size: 30px;
    padding-bottom: 10px;
}
.form-action p {
    font-size: 12px;
    padding-bottom: 10px;
    line-height: 25px;
}
form {
    padding-right: 20px !important;
}
form input[type=text], form input[type=password], form input[type=submit] {
    font-family: Verdana;
}
form input[type=text], form input[type=password] {
    width:150px;
    height: 30px;
    margin-bottom: 10px;
    padding-left: 15px;
    background: #fff;
    border: 1px solid #cd6a60;
    color: #e74c3c;
    outline: none;
}
.label {
    width:125px;
    display:inline-block;
    height:30px;
}
.dark-box {
    background: #5e0400;
    box-shadow: 1px 3px 3px #3d0100 inset;
    height: 40px;
    width: 50px;
}
.form-action .dark-box.bottom {
    position: absolute;
    right: 0;
    bottom: -24px;
}
.tabs + .dark-box.top {
    position: absolute;
    right: 0;
    top:...

JavaScript

(function ($) {
    // constants
    var SHOW_CLASS = 'show',
        HIDE_CLASS = 'hide',
        ACTIVE_CLASS = 'active';

    $(window).on('hashchange', function () {
        href = window.location.hash;
        if (href == "") return;
        $('.tabs li a').removeClass('active');
        $('.tabs li a[href=' + href + ']').addClass('active');

        $('.show')
            .removeClass(SHOW_CLASS)
            .addClass(HIDE_CLASS)
            .hide();

        $(href)
            .removeClass(HIDE_CLASS)
            .addClass(SHOW_CLASS)
            .hide()
            .fadeIn(550);
    });
    $(window).trigger('hashchange');
})(jQuery);