JSFiddle - React, Tailwind, and code Playground

by goldfingerxyz

HTML

<div class="main" >
          <h2>CSS Tabs</h2>
          <input id="tab1" type="radio" class="chk" name="tabs" checked><label class="color1" for="tab1" subhajit="content1">Home</label>
          <input id="tab2" type="radio"  class="chk" name="tabs"><label class="color2" for="tab2"  subhajit="content2">Away</label>
          <input id="tab3" type="radio"  class="chk" name="tabs"><label class="color3" for="tab3"  subhajit="content3">Samples</label>
          <input id="tab4" type="radio"  class="chk" name="tabs"><label class="color4" for="tab4"  subhajit="content4">About</label>
          <hr>
          <div class="section displayBlock" id="content1">
            <h3>Subhra</h3>
            <p>HI</p>
          </div>
          
          <div class="section" id="content2">
            <h3>Mithun</h3>
            <p>hello</p></div>
          
          <div class="section" id="content3">
            <h3>Me</h3>
            <p>Formal Hi Hello</p></div>
          
          <div class="section" id="content4">
            <h3>Other</h3>
            <p>Nothing to say</p></div>
          
        </div>

CSS

body {
  background: #30291C;
  font-family: "Open Sans", "Arial";
}
.main {
  background: #FFF;
  width: 500px;
  margin: 50px auto;
  padding: 10px 30px 80px;
  box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
p {
  font-size: 13px;
}
input, .section {
  clear: both;
  padding-top: 10px;
  display: none;
}
label {
  font-weight: bold;
  font-size: 14px;
  display: block;
  float: left;
  padding: 10px 30px;
  border-top: 3px solid transparent;
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
  border-bottom: 1px solid #DDD;
}
label:hover {
  cursor: pointer;
 /* text-decoration: underline;*/
}
/*#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 {
  display: block;
}*/
.displayBlock{display:block;}
input:checked + label {
  border-top-color:red;
  border-right-color: #DDD;
  border-left-color: #DDD;
  border-bottom-color: transparent;
  text-decoration: none;
}
input:checked + label.color2 {
  border-top-color:green;
  
}
input:checked + label.color3 {
  border-top-color:yellow;
}
input:checked + label.color4 {
  border-top-color:blue;
}

hr {
  position: relative;
  top: 42px;
  border: none;
  border-bottom: 1px solid #DDD;
}

JavaScript

$(document).ready(function(){ 
		
		/*$('label').eq(0).click();
		$('label').click(function(e) {
            var index = $( this ).index();
			$('.section').removeClass('displayBlock');
			$('.section').eq( (index / 2 ) - 1).addClass('displayBlock');
        });*/
		$('label').eq(0).click();
		$('label').click(function(e) {
          var tergetId = $(this).attr('subhajit');
		  $('.section').removeClass('displayBlock');
		  $('#'+tergetId).addClass('displayBlock');
        });		
	});