Simple Accordion - Tailwind Component

<!-- font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
  integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="h-screen grid place-items-center">
  <div class="lg:w-2/5 sm:w-3/5 w-11/12 mx-auto border">
    <div class="bg-white p-10 shadow-sm rounded-xl space-y-4">
      <h3 class="font-semibold text-gray-800 text-xl">Coronavirus - Facts, advice and measures</h3>
      <div class="transition bg-yellow-50 hover:bg-yellow-100 rounded-lg border-l-4 border-yellow-500">
        <div
          class="accordion-header font-normal cursor-pointer transition flex space-x-5 px-5 items-center h-16 bg-yellow-200 hover:bg-yellow-300">
          <i class="fas fa-plus"></i>
          <h3>Facts and knowledge about COVID-19</h3>
        </div>
        <div class="accordion-content px-5 pt-0 overflow-hidden max-h-0 space-y-4 mr-4 text-sm">
          <p class="pl-8 text-justify pt-4">
            Lorem ipsum dolor sit amet.
          </p>
          <p class="pl-8 text-justify">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, pariatur?
          </p>
          <p class="pl-8 text-justify">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui accusantium nihil recusandae sed.
          </p>
          <p class="pl-8 text-justify pb-6">
            Lorem ipsum dolor sit amet.
          </p>
        </div>
      </div>
      <div class="transition bg-blue-50 hover:bg-blue-100 rounded-lg border-l-4 border-blue-500">
        <div
          class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16 bg-blue-200 hover:bg-blue-300">
          <i class="fas fa-plus"></i>
          <h3>For the public</h3>
        </div>
        <div class="accordion-content px-5 pt-0 overflow-hidden max-h-0 space-y-4 mr-4 text-sm">
          <p class="pl-8 text-justify pt-4">
            Lorem ipsum dolor sit amet.
          </p>
          <p class="pl-8 text-justify">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, pariatur?
          </p>
          <p class="pl-8 text-justify">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui accusantium nihil recusandae sed.
          </p>
          <p class="pl-8 text-justify pb-6">
            Lorem ipsum dolor sit amet.
          </p>
        </div>
      </div>
      <div class="transition bg-pink-50 hover:bg-pink-100 rounded-lg border-l-4 border-pink-500">
        <div
          class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16 bg-pink-200 hover:bg-pink-300">
          <i class="fas fa-plus"></i>
          <h3>Facts and knowledge about COVID-19</h3>
        </div>
        <div class="accordion-content px-5 pt-0 overflow-hidden max-h-0 space-y-4 mr-4 text-sm">
          <p class="pl-8 text-justify pt-4">
            Lorem ipsum dolor sit amet.
          </p>
          <p class="pl-8 text-justify">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, pariatur?
          </p>
          <p class="pl-8 text-justify">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui accusantium nihil recusandae sed.
          </p>
          <p class="pl-8 text-justify pb-6">
            Lorem ipsum dolor sit amet.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .accordion-content {
    transition: max-height 0.3s ease-out, padding 0.3s ease;
  }
</style>

<script>
  const accordionHeader = document.querySelectorAll(".accordion-header");
  accordionHeader.forEach((header) => {
    header.addEventListener("click", function () {
      const accordionContent = header.parentElement.querySelector(".accordion-content");
      let accordionMaxHeight = accordionContent.style.maxHeight;

      if (accordionMaxHeight == "0px" || accordionMaxHeight.length == 0) {
        accordionContent.style.maxHeight = `${accordionContent.scrollHeight + 32}px`;
        header.querySelector(".fas").classList.remove("fa-plus");
        header.querySelector(".fas").classList.add("fa-xmark");
      } else {
        accordionContent.style.maxHeight = `0px`;
        header.querySelector(".fas").classList.add("fa-plus");
        header.querySelector(".fas").classList.remove("fa-xmark");
      }
    });
  });
</script>