How to create FAQ component using Tailwindcss and Alpinejs

Here is an example of how you can create a beautiful FAQ component using Tailwind CSS and Alpine.js:

<script src="//" defer></script>
  [x-cloak] { display: none !important; }
<div x-data="{ open: false }">
  <div class="rounded bg-white p-4 shadow-md">
    <button class="flex w-full justify-between p-2 text-left font-medium leading-5 text-gray-700 hover:text-gray-900 focus:text-gray-900 focus:outline-none" @click="open = !open">
      <span>What is Tailwind CSS?</span>
      <svg class="h-5 w-5" x-bind:class="{ 'rotate-180': open }" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
    <div x-cloak x-show="open" class="mt-2 rounded-md bg-gray-200 p-4" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95">Tailwind CSS is a utility-first CSS framework that makes it easy to build customizable, responsive designs without writing any CSS. Instead of predefined styles, it provides a set of low-level utility classes that you can use to style your HTML elements.</div>

This code creates a simple FAQ component with a question and an answer. When the user clicks on the question, the answer is displayed using a sliding transition provided by Alpine.js. The styles for the component are provided by Tailwind CSS.

You can add additional questions and answers to the component by adding additional buttons and divs with the same structure as the ones provided in the example.

I hope this helps!