<body class="bg-grey-400">
  <div class="accordion flex flex-col items-center justify-center h-screen">
  <!--  Panel 1  -->
  <div class="w-3/4">
    <input type="checkbox" name="panel" id="panel-1" class="hidden">
    <label for="panel-1" class="relative block bg-black text-white p-4 shadow border-b border-grey bg-indigo-700">Panel 1</label>
    <div class="accordion__content overflow-hidden bg-indigo-600 text-white">
      <h2 class="accordion__header pt-4 pl-4">Header</h2>
      <p class="accordion__body p-4" id="panel1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
  <!-- Panel 2 -->
  <div class="w-3/4">
    <input type="checkbox" name="panel" id="panel-2" class="hidden">
    <label for="panel-2" class="relative block bg-black text-white p-4 shadow border-b border-grey bg-indigo-700">Panel 2</label>
    <div class="accordion__content overflow-hidden bg-grey-lighter">
      <h2 class="accordion__header pt-4 pl-4">Header</h2>
      <p class="accordion__body p-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
  <!--  Panel 3  -->
  <div class="w-3/4">
    <input type="checkbox" name="panel" id="panel-3" class="hidden">
    <label for="panel-3" class="relative block bg-black text-white p-4 shadow border-b border-grey bg-indigo-700">Panel 3</label>
    <div class="accordion__content overflow-hidden bg-grey-lighter">
      <h2 class="accordion__header pt-4 pl-4">Header</h2>
      <p class="accordion__body p-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</div>
  
  <div class="mt-4">
  <div class="list-container">
    <div class="list-items flex flex-col sm:flex-row items-center justify-between max-w-xl mx-auto border-b py-4 dark:bg-gray-700 rounded-md my-1 px-4">
      <div class="flex flex-row items-center space-x-4">
        <img src="https://i.pravatar.cc/150?img=31" alt="default img" class="h-12 w-12 rounded-full" />
        <div>
          <h1 class="tracking-tight dark:text-gray-100">Scarlet Johnson</h1>
          <p class="text-gray-500 font-light dark:text-gray-300">scarlet@starkindustries.com</p>
        </div>
      </div>
      <div>
        <button class="bg-green-100 rounded-md px-4 py-1 text-green-800 text-sm font-semibold mt-4 sm:mt-0">Complete KYC</button>
      </div>
    </div>
    <div class="list-items flex flex-col sm:flex-row items-center justify-between max-w-xl mx-auto border-b py-4 dark:bg-gray-700 rounded-md my-1 px-4">
      <div class="flex flex-row items-center space-x-4">
        <img src="https://i.pravatar.cc/150?img=7" alt="default img" class="h-12 w-12 rounded-full" />
        <div>
          <h1 class="tracking-tight dark:text-gray-100">Tony Stark</h1>
          <p class="text-gray-500 font-light dark:text-gray-300">tony@starkindustries.com</p>
        </div>
      </div>
      <div>
        <button class="bg-green-100 rounded-md px-4 py-1 text-green-800 text-sm font-semibold mt-4 sm:mt-0">Complete KYC</button>
      </div>
    </div>
    <div class="list-items flex flex-col sm:flex-row items-center justify-between max-w-xl mx-auto border-b py-4 dark:bg-gray-700 rounded-md my-1 px-4">
      <div class="flex flex-row items-center space-x-4">
        <img src="https://i.pravatar.cc/150?img=8" alt="default img" class="h-12 w-12 rounded-full" />
        <div>
          <h1 class="tracking-tight dark:text-gray-100">Hawkeye Vision</h1>
          <p class="text-gray-500 font-light dark:text-gray-300"">hawkeye@starkindustries.com</p>
        </div>
      </div>
      <div>
        <button class="bg-green-500 rounded-md px-4 py-1 text-green-100 text-sm font-semibold mt-4 sm:mt-0">KYC Completed</button>
      </div>
    </div>
  </div>
</div>
</body>
.bg-grey-400 { background-color: #c4c7cf; }
label:after {
  content: '+';
  position: absolute;
  right: 1em;
  color: #fff;
}

input:checked + label:after {
  content: '-';
  line-height: .8em;
}


.accordion__content{
  max-height: 0em;
  transition: all 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}
input[name='panel']:checked ~ .accordion__content {
  /* Get this as close to what height you expect */
  max-height: 50em;
}

External CSS

  1. https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.