Developer-Friendly Tailwind Marketing Components

Latest Tailwind Components

Responsive HTML building blocks for marketing, applications, dashboards and more.

Tabs

<js-component src="marketing/tabs"></js-component>

Accordion

<div x-data="{ openSection: null }" class="space-y-4">
  <div class="border rounded">
    <button @click="openSection = openSection === 1 ? null : 1" class="w-full text-left px-4 py-2 focus:outline-none focus:ring">
      <h2 class="font-semibold">Section 1</h2>
    </button>
    <div x-show="openSection === 1" class="px-4 py-2">
      <p class="text-black">Content for section 1 goes here. This can be any content you want to hide or show on demand.</p>
    </div>
  </div>
  <div class="border rounded">
    <button @click="openSection = openSection === 2 ? null : 2" class="w-full text-left px-4 py-2 focus:outline-none focus:ring">
      <h2 class="font-semibold">Section 2</h2>
    </button>
    <div x-show="openSection === 2" class="px-4 py-2">
      <p class="text-black">Content for section 2 goes here. It also can contain any kind of information you wish to reveal.</p>
    </div>
  </div>
  <div class="border rounded">
    <button @click="openSection = openSection === 3 ? null : 3" class="w-full text-left px-4 py-2 focus:outline-none focus:ring">
      <h2 class="font-semibold">Section 3</h2>
    </button>
    <div x-show="openSection === 3" class="px-4 py-2">
      <p class="text-black">Content for section 3. Keep these sections concise and relevant to improve user experience.</p>
    </div>
  </div>
</div>

<js-component src="marketing/accordion"></js-component>