JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="tabs">
  <form action="">
    <label for="tab1">tab1</label>
    <label for="tab2">tab2</label>
    <label for="tab3">tab3</label>
    <label>
      <input type="radio" name="tab" id="tab1" checked="true">
      <div class="expand">
        <div class="title">Таб1</div>
        <div class="content">
         1 orem ipsum dolor sit amet, consectetur adipisicing elit. Autem hic fugiat facilis molestias reprehenderit libero, illo nemo similiqconsectetur adipisicing elit. Autem hic fugiat facilis molestias reprehenderit libero, illo nemo similique accusamus itaque, modi harum odit adipisci totam architecto consectetur magnam magni vero.
        </div>
      </div>
    </label>
    <label>
      <input type="radio" name="tab" id="tab2">
      <div class="expand">
        <div class="title">Таб2</div>
        <div class="content">
         2 orem ipsum dolor sit amet, consectetur adipisicing elit. Autem hic fugiat facilis molestias reprehenderit libero, illo nemo similique accusamus itaque, modi harum odit adipisci totam architecto consectetur magnam magni vero.onsectetur adipisicing elit. Autem hic fugiat facilis molestias reprehenderit libero, illo nemo similique accusamus itaque, modi harum odit adipisci totam architecto consectetur magnam magni vero.
        </div>
      </div>
    </label>
    <label>
      <input type="radio" name="tab" id="tab3">
      <div class="expand">
        <div class="title">Таб3</div>
        <div class="content">
         1 orem ipsum dolor sit amet, consectetur adipisicing elit. Autem hic fugiat facilis molestias reprehenderit libero, illo nemo samet, consectetur adipisicing elit. Autem hic fugiat facilis molestias reprehenderit libero, illo nemo similique accusamus itaque, modi harum odit adipisci totam architecto consectetur magnam magni vero.amet, consectetur adipisicing elit. Autem hic fugiat facilis molestias reprehenderit libero, illo nemo similique accusamus itaque, modi harum odit adipisci totam architecto...

SCSS

.tabs {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  position: relative;
  padding-top: 25px;
  input {
    display: none;
  }
  .content {
    opacity:0;
    font-size:0;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
  }
  .title {
    display: none;
  }
  input:checked + .expand .content {
    opacity:1;
    font-size: 14px;
  }
  input:checked + .expand .title {
    color: #f00;
  }  
}