JSFiddle - React, Tailwind, and code Playground

by Bouteille Dimitri

HTML

<input type="checkbox" id="toggle">

<div class="toggle">
  <label for="toggle">dsaosame cicon and text</label>
</div>

<div class="contents">
  <div class="content">
    <ul>
      <li>aaa</li>
      <li>dsadsads</li>
     </ul>
  </div>
  <div class="content">
    <ul>
      <li>aaa</li>
      <li>dsadsads</li>
     </ul>
  </div>
</div>

CSS

.content {
  top:      0px;
  width:      75%;
  max-width: 300px;
  background: $white;
  z-index: 10;
  box-shadow: 5px 0 5px 0 rgba(0,0,0,.1);
  padding-top: 20px;
   transition: all 0.2s ease-in-out;
  }


input[type='checkbox']:checked ~ .contents .content:first-child {
  background: red;
}