JSFiddle - React, Tailwind, and code Playground

by Alex Fogarty

HTML

<div class="maincontent" id="sub">
    <div id="leftSide">
         <h1>Radio Work Experience </h1>

        <div id="tab-group">
            <div class="tab-header active" id="tab-header-1">Prairie Public</div>
            <div class="tab-content active" id="tab-content-1">
                
<h3 id="title"><a href=" http://news.prairiepublic.org/post/pros-and-cons-gmos-part-1" target="_blank">"The pros and cons of GMOs - part 1"</a> </h3> By Erika Lorentzsen, Special to <em>Prarie Public</em>

                <br />
<span id="date">MAY 19, 2014</span>

                 <h3 id="title"><a href=" http://news.prairiepublic.org/post/gmo-two-soybeans-and-european-imports " target="_blank">"Soybeans and European imports - GMOs part 2"</a> </h3> By Erika Lorentzsen, Special to <em>Prarie Public</em>

                <br />
<span id="date">MAY 21, 2014</span>

            </div>
            <div class="tab-header" id="tab-header-2">NPR</div>
            <div class="tab-content" id="tab-content-2">
                	<h3 id="title">"Wind Energy Gaining Momentum".  Segment for regional feed of NPR's "Morning Edition"
       
 </h3> Produced and directed by Erika Lorentzsen, Special to <em>Prairie Public.</em>

                <br />
<span id="date">Originally aired APRIL 27, 2007</span>

            </div>
            <div class="tab-header" id="tab-header-3">WJFF</div>
            <div class="tab-content" id="tab-content-3">
                
<h3 id="title">Interview with Lisa Nold, writer based in Cambridge, Mass. </h3> Produced by Erika Lorentzsen,
<em>WJFF "Making Waves".</em>

                <br />
<span id="date">Originally aired JUNE 29, 2009</span>

                <div class="audioWrap">
                    <audio controls>
                        <source src="" type="audio/ogg">
                            <source src="" type="audio/mpeg">Your browser does not support the audio element.</audio>
                </div>
                
<h3 id="title">Interview with...

CSS

/* Panel Styles */
 #tab-group .tab-header {
    font-weight: normal;
    font-size: 16px;
    text-transform: uppercase;
    padding: 4px 6px;
}
.ready {
    position: relative;
    margin-bottom: 2em;
}
#tab-group.ready .tab-header {
    font-weight: normal;
    font-size: 13px;
    text-transform: uppercase;
    padding: 4px 6px;
}
.ready .tab-header {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0.25em 0.5em;
    left: 0;
    background: #white;
    border-bottom:;
    border-radius: z-index: 2;
    cursor: pointer;
}
.ready .tab-header.active {
    background: white;
    border-bottom: 2px solid #F8060A;
}
.ready .tab-content {
    position: relative;
    top: 0;
    margin: 0;
    padding: 0.5em;
    top: 35px;
    border:;
    z-index: 1;
    background: white;
    zoom: 1;
}
.ready .tab-content:after {
    content:"\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.ready .tab-content {
    display: none;
}
.ready .tab-content p {
    margin: 0;
    padding: 0 0 1em;
}
.ready .tab-content.active {
    display: block;
}
/*begin RADIO image header tabs*/
 .ready #tab-header-1 {
}
.ready #tab-header-2 {
    left: 50%;
}
.ready #tab-header-3 {
    left: 72%;
}
/* Global Styles */
 html {
    position: relative;
    min-height: 100%;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color:#000;
}
a:link {
    color: #EE3737;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #000;
}
a:hover {
    text-decoration: none;
    color: #8E8E8E;
}
a:active {
    text-decoration: none;
    color: #000;
}
nav a:link {
    color: #000;
    text-decoration: none;
}
nav a:visited {
    text-decoration: none;
    color: #000;
}
nav a:hover {
    text-decoration: none;
    color: #8E8E8E;
}
nav a:active {
    text-decoration: none;
    color: #000;
}
* {
    box-sizing: border-box;
}
body {
    margin: 0 0 100px;
    /* bottom =...

JavaScript

document.addEventListener('DOMContentLoaded', function() {
	document.getElementById('tab-group').className = 'ready';

var tabHeaders = document.getElementsByClassName('tab-header');
	for (var i = 0; i < tabHeaders.length; i++) {
		tabHeaders[i].addEventListener('click', activateTab);
	}
	
	function activateTab(event) {
		var myID = this.id, // e.g. tab-header-1
		contentID = myID.replace('header', 'content'); // result: tab-content-1
	
        deactivateAllTabs();
        
		document.getElementById(myID).className = 'tab-header active';
		document.getElementById(contentID).className = 'tab-content active';
	}
    
    function deactivateAllTabs() {
		document.getElementById('tab-header-1').className = 'tab-header';
		document.getElementById('tab-header-2').className = 'tab-header';
		document.getElementById('tab-header-3').className = 'tab-header';
		document.getElementById('tab-content-1').className = 'tab-content';
		document.getElementById('tab-content-2').className = 'tab-content';
		document.getElementById('tab-content-3').className = 'tab-content';
	}
});