JSFiddle - React, Tailwind, and code Playground

by Oleg Khobotov

HTML

<div id="info">
    <b id="tab1" class="hiddenTarget"></b>
    <b id="tab2" class="hiddenTarget"></b>
    <b id="tab3" class="hiddenTarget"></b>
    <b id="tab4" class="hiddenTarget"></b>
    <b id="tab5" class="hiddenTarget"></b>
    <div class="tabbedPages">
        <ul class="tabs">
            <li><a href="#tab1" class="default tab1 tabpages">Tab One</a></li>
            <li><a href="#tab2" class="tab2 tabpages">Tab #2</a></li>
            <li><a href="#tab3" class="tab3 tabpages">Tab No.3</a></li>
            <li><a href="#tab4" class="tab4 tabpages">The Fourth Tab</a></li>
            <li><a href="#tab5" class="tab5 tabpages">Any Content</a></li>
        </ul>
        <div id="view1" class="tabcontent default">
            <h4>Tab 'persist'</h4>
            <p>
                The most recently clicked tab will be remembered and stay open even 
                if you click elsewhere on the page or if the page is reloaded.
            </p>
        </div>
        <div id="view2" class="tabcontent">
            <h4>Multiple Tabs</h4>
            <p>
                You can have multiple tabs on the same page, with only 
                one copy of the CSS (javascript is not required).
            </p>
        </div>
        <div id="view3" class="tabcontent">
            <h4>Tab Action from elsewhere on the same page.</h4>
            <p>You can also open a tab using links elsewhere on the same page.</p>
            <p>
                If you click this <a href="#tab1" class="tabpages">LINK</a> you will open 'Tab One' 
                content, and if you click the link beneath this Tab Content you will open 'Tab #2' content.
            </p>
        </div>
        <div id="view4" class="tabcontent">
            <h4>Opened by a link from another page</h4>
            <p>Link from another page can select a tab on the target page when loaded.</p>
        </div>
        <div id="view5" class="tabcontent">
            <h4>No restrictions on tab content</h4>
       ...

CSS

#info{
margin: 0;
padding: 0;
margin-left: 40px;
}

.tabbedPages {margin:50px 0;}
ul.tabs {padding:0; margin:0; list-style:none; float:left; z-index:100;}
ul.tabs li {float:left; margin-right:2px;}
ul.tabs li a {display:block; font:normal 12px/30px arial, sans-serif; border:1px solid #aaa; background:#69c; padding:0 20px; text-decoration:none; color:#fff;
}

.tabcontent {float:left; width:700px; padding:20px;  border:1px solid #aaa;  background:#fff; 
 z-index:10; display:none; clear:left; 
}

.tabcontent p {padding:0 0 5px 0; margin:0; font:normal 12px/20px arial, sans-serif; color:#333;}
.tabcontent h4 {padding:0 0 10px 0; margin:0; font:bold 14px/25px arial, sans-serif; color:#000;}
.tabcontent img {border:1px solid #444; display:block; float:left; margin:0 20px 0 0; box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);}

















/* change the tab to selected style */
ul.tabs li a.default,
#tab1:target ~ .tabbedPages .tabs li a.default,
#tab2:target ~ .tabbedPages .tabs li a.tab2,
#tab3:target ~ .tabbedPages .tabs li a.tab3,
#tab4:target ~ .tabbedPages .tabs li a.tab4,
#tab5:target ~ .tabbedPages .tabs li a.tab5 {background-color:#fff; border-bottom:1px solid #fff; color:#000;}

/* show the tab content */
div.default,
#tab1:target ~ .tabbedPages div.default,
#tab2:target ~ .tabbedPages div#view2,
#tab3:target ~ .tabbedPages div#view3,
#tab4:target ~ .tabbedPages div#view4,
#tab5:target ~ .tabbedPages div#view5 {display:block;}

/* reset the unclicked tabs to default */
#tab2:target ~ .tabbedPages .tabs li a.default,
#tab3:target ~ .tabbedPages .tabs li a.default,
#tab4:target ~ .tabbedPages .tabs li a.default,
#tab5:target ~ .tabbedPages .tabs li a.default {background-color:#69c; border:1px solid #888; color:#fff;}

/* hide the default tab when selecting other tabs*/
#tab2:target ~ .tabbedPages div.default,
#tab3:target ~ .tabbedPages div.default,
#tab4:target ~ .tabbedPages div.default,
#tab5:target ~ .tabbedPages div.default {display:none;}

.clear...