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 Sam Binkley, Professor at Emerson University. Author of <em>Getting Loose</em>. 
 </h3> Produced by Erika Lorentzsen, 
<em>WJFF "Making Waves".</em><br />
<span id="date">Originally aired JUNE 22, 2009</span>
 <div class="audioWrap">
  <audio controls>
  <source src=""...

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 = footer height */
	font-family: 'Arvo', serif;
	font-size: .9em;
	line-height: 1.7em;
	}

	
.maincontent{
	width: 55%;
	margin-right: auto;
	margin-left:...

JavaScript

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

var tab1 = document.getElementById('tab-header-1'),
		tab2 = document.getElementById('tab-header-2'),
		tab3 = document.getElementById('tab-header-3');
		
	tab1.addEventListener('click', activateTab);
	tab2.addEventListener('click', activateTab);
	tab3.addEventListener('click', activateTab);
    
    function activateTab(event) {
		console.log('Heard a click');
	}
});