Components
Accordion
<div class="mx-auto max-w-lg">
<div class="divide-y divide-gray-100">
<details class="group py-4" open>
<summary
class="flex cursor-pointer list-none items-center justify-between text-lg font-medium text-secondary-900"
>
Accordion Item 01
<div class="text-secondary-500">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block h-5 w-5 transition-all duration-300 group-open:rotate-180"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</div>
</summary>
<div class="mt-2 text-secondary-500">This is the first item's accordion body.</div>
</details>
<details class="group py-4">
<summary
class="flex cursor-pointer list-none items-center justify-between text-lg font-medium text-secondary-900"
>
Accordion Item 02
<div class="text-secondary-500">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block h-5 w-5 transition-all duration-300 group-open:rotate-180"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</div>
</summary>
<div class="mt-2 text-secondary-500">This is the second item's accordion body.</div>
</details>
<details class="group py-4">
<summary
class="flex cursor-pointer list-none items-center justify-between text-lg font-medium text-secondary-900"
>
Accordion Item 03
<div class="text-secondary-500">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block h-5 w-5 transition-all duration-300 group-open:rotate-180"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</div>
</summary>
<div class="mt-2 text-secondary-500">This is the third item's accordion body.</div>
</details>
</div>
</div>
<div class="mx-auto max-w-lg">
<div class="divide-y divide-gray-100">
<details class="group py-4" open>
<summary
class="flex cursor-pointer list-none items-center justify-between text-lg font-medium text-secondary-900 group-open:text-primary-700"
>
Accordion Item 01
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block h-5 w-5 group-open:hidden"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hidden h-5 w-5 group-open:block"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
</svg>
</div>
</summary>
<div class="mt-2 text-secondary-500">This is the first item's accordion body.</div>
</details>
<details class="group py-4">
<summary
class="flex cursor-pointer list-none items-center justify-between text-lg font-medium text-secondary-900 group-open:text-primary-700"
>
Accordion Item 02
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block h-5 w-5 group-open:hidden"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hidden h-5 w-5 group-open:block"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
</svg>
</div>
</summary>
<div class="mt-2 text-secondary-500">This is the second item's accordion body.</div>
</details>
<details class="group py-4">
<summary
class="flex cursor-pointer list-none items-center justify-between text-lg font-medium text-secondary-900 group-open:text-primary-700"
>
Accordion Item 03
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block h-5 w-5 group-open:hidden"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hidden h-5 w-5 group-open:block"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
</svg>
</div>
</summary>
<div class="mt-2 text-secondary-500">This is the third item's accordion body.</div>
</details>
</div>
</div>
<div class="mx-auto max-w-lg">
<div class="space-y-3">
<details class="group rounded-lg p-6 open:bg-gray-50" open>
<summary
class="flex cursor-pointer list-none items-center justify-between text-lg font-medium text-secondary-900"
>
Is there a free trial available?
<div class="text-secondary-500">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block h-5 w-5 group-open:hidden"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hidden h-5 w-5 group-open:block"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</summary>
<div class="mt-2 text-secondary-500">
Yes, you can try us for free for 30 days. If you want, we’ll provide you with a free, personalized 30-minute
onboarding call to get you up and running as soon as possible.
</div>
</details>
<details class="group rounded-lg p-6 open:bg-gray-50">
<summary
class="flex cursor-pointer list-none items-center justify-between text-lg font-medium text-secondary-900"
>
Accordion Item 02
<div class="text-secondary-500">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block h-5 w-5 group-open:hidden"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hidden h-5 w-5 group-open:block"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</summary>
<div class="mt-2 text-secondary-500">
Yes, you can try us for free for 30 days. If you want, we’ll provide you with a free, personalized 30-minute
onboarding call to get you up and running as soon as possible.
</div>
</details>
<details class="group rounded-lg p-6 open:bg-gray-50">
<summary
class="flex cursor-pointer list-none items-center justify-between text-lg font-medium text-secondary-900"
>
Accordion Item 03
<div class="text-secondary-500">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block h-5 w-5 transition-all group-open:hidden"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hidden h-5 w-5 transition-all group-open:block"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</summary>
<div class="mt-2 text-secondary-500">
Yes, you can try us for free for 30 days. If you want, we’ll provide you with a free, personalized 30-minute
onboarding call to get you up and running as soon as possible.
</div>
</details>
</div>
</div>
<div class="mx-auto max-w-lg">
<div class="space-y-6">
<details class="group rounded-xl bg-white p-6 shadow-[0_10px_100px_10px_rgba(0,0,0,0.05)]">
<summary
class="flex cursor-pointer list-none items-center justify-between text-lg font-medium text-secondary-900"
>
Product Designer
<div class="text-secondary-500">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block h-5 w-5 transition-all duration-300 group-open:-rotate-90"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</div>
</summary>
<div class="mt-2 text-secondary-500">We're looking for a mid-level product designer to join our team.</div>
</details>
<details class="group rounded-xl bg-white p-6 shadow-[0_10px_100px_10px_rgba(0,0,0,0.05)]">
<summary
class="flex cursor-pointer list-none items-center justify-between text-lg font-medium text-secondary-900"
>
Engineering Manager
<div class="text-secondary-500">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block h-5 w-5 transition-all duration-300 group-open:-rotate-90"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</div>
</summary>
<div class="mt-2 text-secondary-500">We're looking for an experienced engineering manager to join our team.</div>
</details>
<details class="group rounded-xl bg-white p-6 shadow-[0_10px_100px_10px_rgba(0,0,0,0.05)]">
<summary
class="flex cursor-pointer list-none items-center justify-between text-lg font-medium text-secondary-900"
>
Customer Success Manager
<div class="text-secondary-500">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block h-5 w-5 transition-all duration-300 group-open:-rotate-90"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</div>
</summary>
<div class="mt-2 text-secondary-500">We're looking for a customer success manager to join our team.</div>
</details>
</div>
</div>