JSFiddle - React, Tailwind, and code Playground

by agus makmun

HTML

<h1>Tabs Demo</h1>

<div id="tabset1" class="tabset">
    <ul class="tabnavs">
        <li><a href="#one" class="activeTab">One</a></li>
        <li><a href="#two">Two</a></li>
        <li><a href="#three">Three</a></li>
        <li><a href="#four">Four</a></li>
        <!-- can put external url in tabs -->
        <li><a href="http://www.dyn-web.com/">external url</a></li>
    </ul>
    
    <div id="one" class="tabpane activePane">
        <p>Content for tab one here.</p>
    </div>
    
    <div id="two" class="tabpane">
        <p>Content for tab two here</p>
    </div>
    
    <div id="three" class="tabpane">
        <p>Content for tab three here</p>
    </div>
    
    <div id="four" class="tabpane">
        <p>Content for tab four here</p>
    </div>
</div> <!-- end tabset -->

CSS

/* Styles not related to code  */

body { font: 14px/1.3 verdana, arial, helvetica, sans-serif; }
h1 { font-size:1.3em; }
h2 { font-size:1.2em; }
a:link { color:#33c; }    
a:visited { color:#339; }


ul.tabnavs { 
    display:none;
    }

@media print {
    ul.tabnavs { display: none; }
}

div.tabset {
    margin:1em 0;
    width:40em; /* need width for ie < 8 */
   }
div.tabpane { 
    display:none;
    clear:both;
    padding:4px 10px;
    border:solid 1px #D2D8EA;
	background-color: #fff;
    }
    
div.activePane { 
    display:block;
    }
    
ul.tabnavs {
    display:block; /* display:none initially */
    margin:0; padding:0;
    list-style:none;
    }
ul.tabnavs li { 
    display:inline;
    }
ul.tabnavs li a {
    text-decoration:none;
    background-color:#F4F5FA;
    border:solid 1px #D2D8EA;
    padding:2px 10px; 
    margin:0 2px 0 0; /* gap between tabs */
    float:left; width:auto;
    position:relative; top:1px; /* brings down over pane border-top */
    }
    
ul.tabnavs li a:link, ul.tabnavs li a:visited {
    color:#4B63AA;
    }
ul.tabnavs li a:hover {
    background-color:#fff;
    }
ul.tabnavs li a.activeTab:link, 
ul.tabnavs li a.activeTab:visited {
    background-color:#fff;
	border-bottom: 1px solid #fff;
    }

JavaScript

DYN_WEB.Tabs.setup({
    id: 'tabset1', // if of tabset
    css: 'css/tabs.css', // optional if you don't care about accessibility 
    useCookies: true // optional
});

<script src='http://www.dyn-web.com/code/tabs/js/dw_tabs.js' type="text/javascript"/>