<div class="w-1/2 h-screen mx-auto bg-gray-200">
  <div class="mx-auto w-3/4 shadow-lg rounded-lg bg-red-500 overflow-hidden">
    <div>
      <input type="radio" name="tailwind_accordion" id="tab1" class="accordion__input px-2 py-4 hidden">
      <label for="tab1" class="accordion__label p-4 block text-white font-bold cursor-pointer relative hover:bg-red-600 items-center">Tab One</label>
      <div class="accordion__content bg-white leading-relaxed p-4 hidden">
        <p class="text-lg font-bold py-4">Section 1</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt laoreet ex volutpat tristique. Cras gravida libero odio, sed vehicula sem consequat ut. Aenean porta vel nibh nec pulvinar. Curabitur porttitor tellus in lobortis pretium. Donec faucibus volutpat justo, ac ornare nisi hendrerit ac. Sed scelerisque enim eget fermentum suscipit. Ut vulputate diam ut nibh gravida, a molestie mauris lacinia. Mauris vitae ligula ac eros rhoncus feugiat. Sed molestie nisi vestibulum hendrerit mattis. Curabitur vitae dapibus tellus. Nunc lobortis ornare magna eu congue.</p>
      </div>
    </div>
    
    <div>
      <input type="radio" name="tailwind_accordion" id="tab2" class="accordion__input px-2 py-4 hidden">
      <label for="tab2" class="accordion__label p-4 block text-white font-bold cursor-pointer relative transition hover:bg-red-600">Tab Two</label>
      <div class="accordion__content bg-white leading-relaxed p-4 hidden">
        <p class="text-lg font-bold py-4">Section 2</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt laoreet ex volutpat tristique. Cras gravida libero odio, sed vehicula sem consequat ut. Aenean porta vel nibh nec pulvinar. Curabitur porttitor tellus in lobortis pretium. Donec faucibus volutpat justo, ac ornare nisi hendrerit ac. Sed scelerisque enim eget fermentum suscipit. Ut vulputate diam ut nibh gravida, a molestie mauris lacinia. Mauris vitae ligula ac eros rhoncus feugiat. Sed molestie nisi vestibulum hendrerit mattis. Curabitur vitae dapibus tellus. Nunc lobortis ornare magna eu congue.</p>
      </div>
    </div>
    <div>
      <input type="radio" name="tailwind_accordion" id="tab3" class="accordion__input px-2 py-4 hidden">
      <label for="tab3" class="accordion__label peer-checked:block p-4 block text-white font-bold cursor-pointer relative transition hover:bg-red-600">Tab Three</label>
      <div class="accordion__content bg-white leading-relaxed p-4 hidden">
        <p class="text-lg font-bold py-4">Section 3</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt laoreet ex volutpat tristique. Cras gravida libero odio, sed vehicula sem consequat ut. Aenean porta vel nibh nec pulvinar. Curabitur porttitor tellus in lobortis pretium. Donec faucibus volutpat justo, ac ornare nisi hendrerit ac. Sed scelerisque enim eget fermentum suscipit. Ut vulputate diam ut nibh gravida, a molestie mauris lacinia. Mauris vitae ligula ac eros rhoncus feugiat. Sed molestie nisi vestibulum hendrerit mattis. Curabitur vitae dapibus tellus. Nunc lobortis ornare magna eu congue.</p>
      </div>
    </div>
  </div>
</div>
/* 
  In Your Project your input class will have TW class of peer

  Then for the content div you will use peer-checked:block to expand the content when checked.

  You can also have these set to open all selected by changing the input from radio to checkbox.
*/

.accordion__input:checked ~ .accordion__content {
  display: block;
}
View Compiled

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.