JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="spoiler">
    <input type="checkbox" id="ch1" class="spoiler-input" />
    <label class="spoiler-link" for="ch1">Название слова</label>
    <div class="decription">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus placeat ipsa deleniti voluptatum, error eum, unde neque rerum distinctio atque tempora reiciendis, incidunt temporibus! Unde fuga blanditiis et quaerat perferendis!
    </div>
  </div>
  <div class="spoiler">
    <input type="checkbox" id="ch2" class="spoiler-input" />
    <label class="spoiler-link" for="ch2">Название слова</label>
    <div class="decription">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus placeat ipsa deleniti voluptatum, error eum, unde neque rerum distinctio atque tempora reiciendis, incidunt temporibus! Unde fuga blanditiis et quaerat perferendis!
    </div>
  </div>

CSS

.spoiler{
      border:1px solid #ccc;
      margin:10px 0; 
    }
    .spoiler-input {
      display: none;
    }
    
    .spoiler-link {
      padding-left: 20px;
      position: relative;
      display: block;
    }
    
    .spoiler-link:before {
      position: absolute;
      left: 0;
      content: '\23F5';
    }
    
    .decription {
      height: 0;
      overflow: hidden;
      transition: .5s;
    }
    
    .spoiler-input:checked + .spoiler-link + .decription {
      height: auto;
      overflow: inherit;
    }
    
    .spoiler-input:checked + .spoiler-link:before {
      transform: rotate(90deg);
    }