JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
<input type="radio" id="tab1" name="tab" class="tab" checked="checked">
<label for="tab1">One</label>
<input type="radio" id="tab2" name="tab" class="tab">
<label for="tab2" name="tab">Two</label>
<input type="radio" id="tab3" name="tab" class="tab">
<label for="tab3" name="tab">Three</label>
<input type="radio" id="tab4" name="tab" class="tab">
<label for="tab4" name="tab">Four</label>

  <div id="one" class="hiddencontent">
    <h1>Tab 1 heading</h1>
  Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.
  </div> 
   <div id="two" class="hiddencontent">
    <h1>Tab 2 heading</h1>
  Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.
  </div> 
   <div id="three" class="hiddencontent">
    <h1>Tab 3 heading</h1>
  Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.
  </div> 
   <div id="four" class="hiddencontent">
    <h1>Tab 4 heading</h1>
  Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.
  </div> 
  
</div>

CSS

input.tab{
	display: none;
}

label{
	display:inline-block;
	border: 0px;
	color:white;
	border-radius: 3px;
	background-color: #525252;
	padding: 10px 60px;
	margin: -1px;
	font-size: 14px;


}
label:hover{
	background-color: #667876;
	cursor: pointer;
	-webkit-transition:background-color 0.5s;
	transition:background-color 0.5s;
}
input:checked+label{
	background-color: #b8b63e;
	

	
}



.hiddencontent{
	position: absolute;
	top:-9999px;
	border-top: 8px solid;
	border-top-color:#b8b63d;
	padding:15px 10px;
	background-color: #f7eec5;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
    
	
}
#main{
	margin-left: 200px;
	margin-right:300px;

}

#tab1:checked ~ #one, #tab2:checked ~ #two, #tab3:checked ~ #three, #tab4:checked ~ #four{
	position: static;
}

@media(max-width: 1110px){
	body{
		padding: 0px;
		margin: 0px;
	}
#main{
	
	margin: 0px;
	padding: 0px;

}


label{
	display: block;
	text-align: center;
	
	
}
#tab1:checked ~ #one, #tab2:checked ~ #two, #tab3:checked ~ #three, #tab4:checked ~ #four{
	position: static;

}

}