JSFiddle - React, Tailwind, and code Playground

by Paulpro

HTML

<a href="#tab1" class="tabs">Tab 1</a>
<a href="#tab2" class="tabs">Tab 2</a>
<a href="#tab3" class="tabs">Tab 3</a>

<div id="tab1">This is tab 1</div>
<div id="tab2">
    This is tab 2
    <img src="http://www.dummyimage.com/60x40/000/fff" />
</div>
<div id="tab3">
    This is tab # 3!
</div>

<script>
(function(){

var tabs = document.getElementsByClassName('tabs');
    
// For each tab
for(var i = tabs.length; i--;){
    
    // Add click handler to tab
    tabs[i].onclick = switch_tab;
    
    // Hide tab
    a_to_tab(tabs[i]).style.display = 'none';
}

// Show first tab
a_to_tab(tabs[0]).style.display = '';
    
function switch_tab(){
    // Hide all tabs
    for(var j = tabs.length; j--;){
        a_to_tab(tabs[j]).style.display = 'none';
    }
    
    // Show this tab
    a_to_tab(this).style.display = '';
    
    // Cancel default onclick action
    return false;
}
    
function a_to_tab(a){
    return document.getElementById(a.href.replace(/^[^#]*#/, ''))
}

})();
</script>