JSFiddle - React, Tailwind, and code Playground

by khushboo097

HTML

<div style="width: 700px; margin: 0 auto;">
  <ul>
    <li><a href="#tab1-div">Link to First Tab</a></li>
    <li><a href="#tab2-div">Link to Second Tab</a></li>
    <li><a href="#tab3-div">Link to Third Tab</a></li>
    <li><a href="#tab4-div">Link to Fourth Tab</a></li>
  </ul>
</div>

<div style="height:300px;"></div>


<!-- 
ORIGINAL BY RENA.TO 
https://codepen.io/renatorib/pen/rlpfj
-->

<div class="pc-tab">
  <input checked="checked" id="tab1" type="radio" name="pct" />
  <input id="tab2" type="radio" name="pct" />
  <input id="tab3" type="radio" name="pct" />
  <input id="tab4" type="radio" name="pct" />
  <div class="tabs">
    <nav>
      <ul>
        <li class="tab1">
          <label for="tab1">First Tab</label>
        </li>
        <li class="tab2">
          <label for="tab2">Second Tab</label>
        </li>
        <li class="tab3">
          <label for="tab3">Third Tab</label>
        </li>
        <li class="tab4">
          <label for="tab4">Fourth Tab</label>
        </li>
      </ul>
    </nav>
  </div>

  <div class="tab_container">
    <div class="tab_content">

      <div id="tab1-div" class="tab1">
        <p class="title>">First</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque quidem minus nostrum, voluptatem accusamus aspernatur quia harum ratione, officia laudantium inventore autem doloribus atque labore numquam non. Hic, animi.</p>
      </div>

      <div id="tab2-div" class="tab2">
        <p class="title>">Second</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum nesciunt ipsum dolore error repellendus officiis aliquid a, vitae reprehenderit, accusantium vero, ad. Obcaecati numquam sapiente cupiditate. Praesentium eaque, quae error!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, maiores.</p>
      </div>

      <div id="tab3-div" class="tab3">
        <p class="title>">Third</p>
        <p>Lorem ipsum dolor sit amet,...

SCSS

/* Component Needs */

.pc-tab input,
.pc-tab .tab_content > div {
  display: none;
}

/* #tab1:checked ~ .tab_container .tab1,
#tab2:checked ~ .tab_container .tab2,
#tab3:checked ~ .tab_container .tab3,
#tab4:checked ~ .tab_container .tab4{
  display: block;
}

#tab1:checked ~ .tabs nav .tab1,
#tab2:checked ~ .tabs nav .tab2,
#tab3:checked ~ .tabs nav .tab3,
#tab4:checked ~ .tabs nav .tab4{
  color: orange;
} */

/* Visual Styles */

$activeColor: transparent; /* #ffffff */
$unactiveColor: #eeeeee;
$unactiveHoverColor: red; /* #dddddd */
$offsetHeight: 50px;


*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #ecf0f1;
}

h1 {
  text-align: center;
  font-weight: 100;
  font-size: 60px;
  color: #e74c3c;
}

.pc-tab { 
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
 .tabs ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      label {
        font-family: "Raleway";
        float: left;
        padding: 15px 25px;
        border: 1px solid #ddd;
        border-bottom: 0;
        background: $unactiveColor;
        color: #444;
        &:hover {
          background: $unactiveHoverColor;
        }
        &:active {
          background: $activeColor;
        }
        /* &:not(:active) {
          background: $unactiveColor;
        } */
      }
      &:not(:last-child) label {
         border-right-width: 0; 
      }
    }
  }
  

  
  .tab_content {
    font-family: "Droid Serif";
    clear: both;
    div {
      padding-top: calc(20px + #{$offsetHeight});
      padding-right: 20px;
      padding-left: 20px;
      padding-bottom: 20px;
      
      width: 100%;
      border: 1px solid #ddd;
      /* background: #fff; */
      line-height: 1.5em;
      letter-spacing: 0.3px;
      color: #444;
      h2 {
        margin: 0;
        font-family: "Raleway";
        letter-spacing: 1px;
        color: #34495e;
      }
    }
  }
}

#tab1:checked ~ .tabs nav...