JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Above tabs</h1>
<p>Test test</p>

<div class="container">
<div class="tabs-wrapper">
    <input type="radio" id="tab1" name="tab" data-tab="1" class="tab-head" checked="checked"/>
    <label for="tab1">One</label>
    
    <input type="radio" id="tab2" name="tab" data-tab="2" class="tab-head"/>
    <label for="tab2">Two</label>
    
    <input type="radio" id="tab3" name="tab" data-tab="3" class="tab-head"/>
    <label for="tab3">Long name with form</label>
    
    <input type="radio" id="tab4" name="tab" data-tab="4" class="tab-head"/>
    <label for="tab4">Nested</label>
    
			<div data-tab-body="1" class="tab-body">
				<h1>Tab 1 heading</h1>
				<p>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.</p>
			</div>
			<div data-tab-body="2" class="tab-body">
				<h1>Tab 2 heading</h1>
				<p>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. <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere voluptate, pariatur, quis voluptates quod fugiat repudiandae, cupiditate nesciunt dolore eaque maiores quas quisquam autem voluptatibus ipsam unde ipsa aperiam veritatis!</span>
				<h3>Test</h3><span>Aut repellat tempore et ratione, minus soluta necessitatibus quod repellendus quia velit voluptatum veniam doloremque natus minima, optio nesciunt non ipsam harum commodi vitae iusto quos sapiente. Quibusdam reiciendis, temporibus.</span>
				<span>Quod libero facilis magnam quis, est quam quidem illo ipsum, sapiente, repellendus veniam amet velit repellat officia incidunt...

CSS

@import url(//fonts.googleapis.com/css?family=Raleway:100,200,300);

body {
   font: 1em/1.5em "Raleway", sans-serif;
}

.container {
	max-width: 80%;
	margin: auto;
}

.tabs-wrapper .tab-body {
  display: none;
}

.tabs-wrapper input[type="radio"] {
  position: absolute;
  top: -100px;
}

.tabs-wrapper input[data-tab="1"]:checked ~ div[data-tab-body="1"],
.tabs-wrapper input[data-tab="2"]:checked ~ div[data-tab-body="2"],
.tabs-wrapper input[data-tab="3"]:checked ~ div[data-tab-body="3"],
.tabs-wrapper input[data-tab="4"]:checked ~ div[data-tab-body="4"]
{
  display: block;
}

.tabs-wrapper input + label {
  cursor: pointer;
  padding: 10px 30px;
  display: inline-block;
  background-color: #525252;
  border-radius: 3px 3px 0 0;
  color: #f2f2f2;
  transition: background-color .5s ease;
}

.tabs-wrapper input + label:hover {
  background-color: #667876;
}

.tabs-wrapper input:checked + label {
  background-color: #B8B63E;
}

.tabs-wrapper .tab-body {
  background-color: #F7EEC6;
  border-radius: 0 5px 5px;
  padding: 5px;
  border-top: 5px solid #B8B63E; 
  
  animation: fadein 1s;
  -moz-animation: fadein 1s;
  -webkit-animation: fadein 1s;
  -o-animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-moz-keyframes fadein {
    from { opacity:0; }
    to { opacity: 1; }
}

@-webkit-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-o-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media screen and (max-width: 700px) {
  .tabs-wrapper input + label {
    display: block;
    border-radius: 0;
  }
  
  .tabs-wrapper input:not(:first-child) + label {
    border-top: 2px solid #4D4C47;
  }
  
  .tabs-wrapper .tab-body {
    border: 0;
  }
	
	.container {
		max-width: 100%;
	}
}