JSFiddle - React, Tailwind, and code Playground

by gbos

HTML

<div class="aspect-tab">
    <input id="item-1" type="checkbox" class="aspect-input" name="aspect">
    <label for="item-1" class="aspect-label"></label>
    <div class="aspect-content">
        <h3>title</h3>
    </div>
    <div class="aspect-tab-content">
        <p>aaaaaa</p>
        <p>bbb</p>
    </div>
    
    
</div>

SCSS

// https://codepen.io/natali_k/pen/XPLjGm

$positive-circle : #82d428;
$negative-circle : #ff6e00;
$circle-gray : #e4e4e4;
$header-black : #242a32;
$background-color : lightgrey;
$tab-text : #5d5d5d;
$white : #fff;
$reviews-text-black: #363636;
$white-light-gray : #f9f9f9;

body {
  background-color: $background-color;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: "Poppins", sans-serif;

  * {
    box-sizing: border-box;
  }
}


.aspect-tab {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 10px;
  border-radius: 4px;
  background-color: $white;
  box-shadow: 0 0 0 1px rgba(236, 236, 236, 1);
  opacity: 1;
  transition: box-shadow .2s, opacity .4s;
  &:hover {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .11);
  }
}

.aspect-input {
  //display: none;
}

.aspect-input:checked~.aspect-content+.aspect-tab-content {
  max-height: 3000px;
}

.aspect-input:checked~.aspect-content:after {
  transform: rotate(0);
}

.aspect-label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  max-height: 80px;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0;
  z-index: 1;
  cursor: pointer;

  &:hover~.aspect-content:after {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTI0IDI0SDBWMGgyNHoiIG9wYWNpdHk9Ii44NyIvPgogICAgICAgIDxwYXRoIGZpbGw9IiM1NTZBRUEiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE1Ljg4IDE1LjI5TDEyIDExLjQxbC0zLjg4IDMuODhhLjk5Ni45OTYgMCAxIDEtMS40MS0xLjQxbDQuNTktNC41OWEuOTk2Ljk5NiAwIDAgMSAxLjQxIDBsNC41OSA0LjU5Yy4zOS4zOS4zOSAxLjAyIDAgMS40MS0uMzkuMzgtMS4wMy4zOS0xLjQyIDB6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=');
  }
}

.aspect-content {
  position: relative;
  display: block;
  height: 80px;
  margin: 0;
  padding: 0 87px 0 30px;
  font-size: 0;
  white-space: nowrap;
  cursor: pointer;

  &:before,
  &:after {
    content: '';
    display:...