<div class="max-w-lg mx-auto mt-8">
  <div class="relative mb-1">
    <input type="checkbox" id="toggle1" class="toggle hidden" />
    <label class="title block font-bold bg-white p-4 cursor-pointer" for="toggle1">
      Title goes here
    </label>
    <div class="content bg-white overflow-hidden">
      <p class="p-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
    </div>
  </div>
  <div class="relative mb-1">
    <input type="checkbox" id="toggle2" class="toggle hidden" />
    <label class="title block font-bold bg-white p-4 cursor-pointer" for="toggle2">
      Title goes here
    </label>
    <div class="content bg-white overflow-hidden">
      <p class="p-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
    </div>
  </div>
  <div class="relative mb-1">
    <input type="checkbox" id="toggle3" class="toggle hidden" />
    <label class="title block font-bold bg-white p-4 cursor-pointer" for="toggle3">
      Title goes here
    </label>
    <div class="content bg-white overflow-hidden">
      <p class="p-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
    </div>
  </div>
</div>
// all the properties here should be added into tailwind.config.js
body {
  background-color: #eee;
  color:  #7a7572;
}

.title {
  color: #7A7572;
}

// if you need after/before pseudo elements please use https://github.com/croutonn/tailwindcss-pseudo-elements
.title::after, .title::before {
  content: '';
  position: absolute;
  right: 1.25em;
  top: 1.25em;
  width: 2px;
  height: 0.75em;
  background-color: #7A7572;
  transition: all 0.2s;
}

.title::after {
  transform: rotate(90deg);
}

.content {
  max-height: 0;
  transition: max-height .20s;
}

.toggle:checked {
  & + .title,
  & + .title + .content {
    box-shadow: 3px 3px 6px #ddd, -3px 3px 6px #ddd;
  }
  & + .title + .content {
    max-height: 500px;
  }
  & + .title::before {
    transform: rotate(90deg) !important;
  }
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.10/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.