JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="tabContainer" class="tabContainer">
<li id="tab1" class="top on">
<h2>Tab 1</h2>
<div class="tabContents">
Tab 1 Contents
</div>
</li>
<li id="tab2" class="top">
<h2>Tab 2</h2>
<div class="tabContents">
Tab 2 Contents
</div>
</li>
<li class="placeholder"></li>
<li id="tab3" class="bottom bottom1">
<h2>Tab 3</h2>
<div class="tabContents">
Tab 3 Contents
</div>
</li>
<li id="tab4" class="bottom">
<h2>Tab 4</h2>
<div class="tabContents">
Tab 4 Contents
</div>
</li>
</ul>
CSS
.tabContainer { position: relative; list-style-type: none; margin: 0; padding: 0; }
.tabContainer li { float: left; border: 1px solid #000; }
.tabContainer .top { width: 150px; }
.tabContainer .bottom { width: 150px; }
.tabContainer .bottom1 { clear: both; }
.tabContainer .placeholder { clear: both; min-height: 300px; border: none; }
.tabContainer h2 { height: 90px; margin: 0; }
.tabContents { position: absolute; top: 90px; left: -5000em; min-height: 300px; background-color: #ccc; }
.on .tabContents { left: 0; }
JavaScript
var currentTab = "tab1"
function initialise() {
var container = document.getElementById('tabContainer')
for (var i = 0, l = container.childNodes.length; i < l; i++) {
var el = container.childNodes[i]
if (el.id) {
el.onmouseover = tabMousedOver
}
}
}
window.onload = initialise
function tabMousedOver(e) {
if (currentTab) {
removeClass(document.getElementById(currentTab), 'on')
}
addClass(this, 'on')
currentTab = this.id
}
function addClass(el, className) {
if (!hasClass(el, className)) {
if (el.className) el.className += ' ' + className
else el.className = className
}
}
function removeClass(el, className) {
var re = new RegExp('(^|\\s)' + className + '(\\s|$)')
el.className = el.className.replace(re, '$2')
}
function hasClass(el, className) {
var re = new RegExp('(^|\\s)' + className + '(\\s|$)')
return re.test(el.className)
}