JSFiddle - React, Tailwind, and code Playground

by krish

HTML

<div class="seeless seeless-accordion">
  <ul>
    <li>Special gentle mode for children</li>
    <li>Small head for easy brushing in baby's mouth</li>
    <li>Soft bristles to help protect delicate gums</li>
  </ul>

  <div class="seemore__control">
    <input type="checkbox" class="seemore__switch" />
    <span class="icon--status"></span>See More

    <ul class="seemore seemore-accordion">
      <li>Suitable for ages 3 and over</li>
      <li>Personalized handle with 4 Star Wars themed stickers</li>
      <li>Disney Magic Timer App</li>
      <li>Timer that signals 2 minutes of brushing, as recommended by dentists</li>
      <li>Rechargeable battery, lasts up to 5 days (2 min, 2 times a day)</li>
    </ul>
  </div>
</div>

CSS

.seemore{
  display: none;
}



.seemore__switch{
  
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  -webkit-appearance: none;
}

.seemore__switch:checked ~ .seemore-accordion{
  display: block;
}

.icon--status{
  width: 18px;
  height: 18px;
  border: 1px solid black;
  display: inline-block;
}

.seemore__switch + .icon--status{
  width: 18px;
  height: 18px;
 background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSI+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTI1NS0xQzExMy42MTgtMS0xLDExMy42MTgtMSwyNTVzMTE0LjYxOCwyNTYsMjU2LDI1NnMyNTYtMTE0LjYxOCwyNTYtMjU2UzM5Ni4zODItMSwyNTUtMXogTTI1NSw0NjguMzMzDQoJCQkJYy0xMTcuODE4LDAtMjEzLjMzMy05NS41MTUtMjEzLjMzMy0yMTMuMzMzUzEzNy4xODIsNDEuNjY3LDI1NSw0MS42NjdTNDY4LjMzMywxMzcuMTgyLDQ2OC4zMzMsMjU1UzM3Mi44MTgsNDY4LjMzMywyNTUsNDY4LjMzMw0KCQkJCXoiLz4NCgkJCTxwYXRoIGQ9Ik0zODIuOTk2LDIzMy42NjdIMTI3LjAzOGMtMTEuNzgyLDAtMjEuMzMzLDkuNTUxLTIxLjMzMywyMS4zMzNzOS41NTEsMjEuMzMzLDIxLjMzMywyMS4zMzNoMjU1Ljk1Nw0KCQkJCWMxMS43ODIsMCwyMS4zMzMtOS41NTEsMjEuMzMzLTIxLjMzM1MzOTQuNzc4LDIzMy42NjcsMzgyLjk5NiwyMzMuNjY3eiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);
}

.seemore__switch:checked + .icon--status{
  width: 18px;
  height: 18px;
  background-image:...