Accordion With big shadow
Accordion With big shadow
=
<div class="mx-auto max-w-lg">
<div class="space-y-6">
<details class="group rounded-xl bg-white shadow-[0_10px_100px_10px_rgba(0,0,0,0.05)]">
<summary class="flex cursor-pointer list-none items-center justify-between p-6 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="px-6 pb-6 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 shadow-[0_10px_100px_10px_rgba(0,0,0,0.05)]">
<summary class="flex cursor-pointer list-none items-center justify-between p-6 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="px-6 pb-6 text-secondary-500">We're looking for an experienced engineering manager to join our team.</div>
</details>
<details class="group rounded-xl bg-white shadow-[0_10px_100px_10px_rgba(0,0,0,0.05)]">
<summary class="flex cursor-pointer list-none items-center justify-between p-6 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="px-6 pb-6 text-secondary-500">We're looking for a customer success manager to join our team.</div>
</details>
</div>
</div>