Accordians allow users to show or hide content, such as FAQs or descriptions.
Micro-interactions are events which have one main task — a single purpose — and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, dare we say it — human.
Micro-interactions are events which have one main task — a single purpose — and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, dare we say it — human.
Micro-interactions are events which have one main task — a single purpose — and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, dare we say it — human.
Micro-interactions are events which have one main task — a single purpose — and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, dare we say it — human.
<div class="w-full max-w-lg space-y-4 p-4">
<div class="border-b border-slate-200 pb-4 last-of-type:border-b-0 last-of-type:pb-0">
<h3>
<button class="flex w-full items-center justify-between">
<span class="text-left text-sm font-medium text-slate-950">What is a micro-interaction?</span>
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 stroke-slate-400 rotate-180">
<path d="m6 9 6 6 6-6">
</path>
</svg>
</button>
</h3>
<p class="mt-2 text-sm text-slate-500">Micro-interactions are events which have one main task — a single purpose — and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, dare we say it — human.</p>
</div>
<div class="border-b border-slate-200 pb-4 last-of-type:border-b-0 last-of-type:pb-0">
<h3>
<button class="flex w-full items-center justify-between">
<span class="text-left text-sm font-medium text-slate-950">Why should I use a micro-interaction?</span>
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 stroke-slate-400 rotate-0">
<path d="m6 9 6 6 6-6">
</path>
</svg>
</button>
</h3>
</div>
<div class="border-b border-slate-200 pb-4 last-of-type:border-b-0 last-of-type:pb-0">
<h3>
<button class="flex w-full items-center justify-between">
<span class="text-left text-sm font-medium text-slate-950">How do I use a micro-interaction?</span>
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 stroke-slate-400 rotate-0">
<path d="m6 9 6 6 6-6">
</path>
</svg>
</button>
</h3>
</div>
</div><div class="w-full max-w-lg space-y-2 p-4">
<div class="rounded-lg transition hover:bg-slate-100 bg-slate-100">
<h3>
<button class="flex w-full items-center space-x-2 p-4">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-500">
<path d="M8.667 12h7">
</path>
<circle cx="12" cy="12" r="9">
</circle>
</svg>
<span class="text-left text-sm font-medium text-slate-950">What is a micro-interaction?</span>
</button>
</h3>
<p class="px-4 pb-4 text-sm text-slate-500">Micro-interactions are events which have one main task — a single purpose — and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, dare we say it — human.</p>
</div>
<div class="rounded-lg transition hover:bg-slate-100">
<h3>
<button class="flex w-full items-center space-x-2 p-4">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-500">
<path d="M15.5 12H12m0 0H8.5m3.5 0V8.5m0 3.5v3.5">
</path>
<circle cx="12" cy="12" r="9">
</circle>
</svg>
<span class="text-left text-sm font-medium text-slate-950">Why should I use a micro-interaction?</span>
</button>
</h3>
</div>
<div class="rounded-lg transition hover:bg-slate-100">
<h3>
<button class="flex w-full items-center space-x-2 p-4">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-500">
<path d="M15.5 12H12m0 0H8.5m3.5 0V8.5m0 3.5v3.5">
</path>
<circle cx="12" cy="12" r="9">
</circle>
</svg>
<span class="text-left text-sm font-medium text-slate-950">How do I use a micro-interaction?</span>
</button>
</h3>
</div>
</div><div class="m-4 w-full max-w-lg divide-y rounded-lg border border-slate-200">
<div>
<h3>
<button class="flex w-full items-center justify-between p-4">
<span class="text-left text-sm font-medium text-slate-950">What is a micro-interaction?</span>
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform text-slate-400 rotate-180">
<path d="m6 6 6 6 6-6M6 12l6 6 6-6">
</path>
</svg>
</button>
</h3>
<p class="px-4 pb-4 text-sm text-slate-500">Micro-interactions are events which have one main task — a single purpose — and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, dare we say it — human.</p>
</div>
<div>
<h3>
<button class="flex w-full items-center justify-between p-4">
<span class="text-left text-sm font-medium text-slate-950">Why should I use a micro-interaction?</span>
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform text-slate-400 rotate-0">
<path d="m6 6 6 6 6-6M6 12l6 6 6-6">
</path>
</svg>
</button>
</h3>
</div>
<div>
<h3>
<button class="flex w-full items-center justify-between p-4">
<span class="text-left text-sm font-medium text-slate-950">How do I use a micro-interaction?</span>
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform text-slate-400 rotate-0">
<path d="m6 6 6 6 6-6M6 12l6 6 6-6">
</path>
</svg>
</button>
</h3>
</div>
</div><div class="w-full max-w-lg space-y-2 ">
<div class="relative ">
<h3 class="rounded bg-white transition hover:bg-slate-100">
<button class="flex w-full items-center space-x-2 p-2">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-500">
<path d="M8.667 12h7">
</path>
<circle cx="12" cy="12" r="9">
</circle>
</svg>
<span class="text-left text-sm font-medium text-slate-950">What is a micro-interaction?</span>
</button>
</h3>
<div class="relative px-4">
<div class="absolute h-full w-2">
<div class="h-full w-px bg-slate-300">
</div>
</div>
<p class="pl-4 text-sm text-slate-500">Micro-interactions are events which have one main task — a single purpose — and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, dare we say it — human.</p>
</div>
</div>
<div class="relative ">
<h3 class="rounded bg-white transition hover:bg-slate-100">
<button class="flex w-full items-center space-x-2 p-2">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-500">
<path d="M15.5 12H12m0 0H8.5m3.5 0V8.5m0 3.5v3.5">
</path>
<circle cx="12" cy="12" r="9">
</circle>
</svg>
<span class="text-left text-sm font-medium text-slate-950">Why should I use a micro-interaction?</span>
</button>
</h3>
</div>
<div class="relative ">
<h3 class="rounded bg-white transition hover:bg-slate-100">
<button class="flex w-full items-center space-x-2 p-2">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-500">
<path d="M15.5 12H12m0 0H8.5m3.5 0V8.5m0 3.5v3.5">
</path>
<circle cx="12" cy="12" r="9">
</circle>
</svg>
<span class="text-left text-sm font-medium text-slate-950">How do I use a micro-interaction?</span>
</button>
</h3>
</div>
</div><div class="w-full space-y-1">
<div>
<h3>
<button class="flex w-full items-center justify-between rounded bg-white p-2 transition hover:bg-slate-100">
<span class="text-left text-sm font-medium text-slate-950">Folders</span>
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform stroke-slate-400 rotate-180">
<path d="m6 9 6 6 6-6">
</path>
</svg>
</button>
</h3>
<div class="space-y-2 px-4 py-2 text-sm text-slate-500">
<a href="#" class="flex">Personal</a>
<a href="#" class="flex">Work</a>
<a href="#" class="flex">School</a>
<a href="#" class="flex">Other</a>
</div>
</div>
<div>
<h3>
<button class="flex w-full items-center justify-between rounded bg-white p-2 transition hover:bg-slate-100">
<span class="text-left text-sm font-medium text-slate-950">Tags</span>
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform stroke-slate-400 rotate-0">
<path d="m6 9 6 6 6-6">
</path>
</svg>
</button>
</h3>
</div>
<div>
<h3>
<button class="flex w-full items-center justify-between rounded bg-white p-2 transition hover:bg-slate-100">
<span class="text-left text-sm font-medium text-slate-950">Archive</span>
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform stroke-slate-400 rotate-0">
<path d="m6 9 6 6 6-6">
</path>
</svg>
</button>
</h3>
</div>
<div>
<h3>
<button class="flex w-full items-center justify-between rounded bg-white p-2 transition hover:bg-slate-100">
<span class="text-left text-sm font-medium text-slate-950">Trash</span>
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform stroke-slate-400 rotate-0">
<path d="m6 9 6 6 6-6">
</path>
</svg>
</button>
</h3>
</div>
<div>
<h3>
<button class="flex w-full items-center justify-between rounded bg-white p-2 transition hover:bg-slate-100">
<span class="text-left text-sm font-medium text-slate-950">Settings</span>
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform stroke-slate-400 rotate-0">
<path d="m6 9 6 6 6-6">
</path>
</svg>
</button>
</h3>
</div>
</div>