Skip to content

Instantly share code, notes, and snippets.

@Nav-Appaiya

Nav-Appaiya/index.html

Created September 10, 2025 08:59
Show Gist options
  • Save Nav-Appaiya/425a17c1349638ba46934ba49db39cf6 to your computer and use it in GitHub Desktop.
Save Nav-Appaiya/425a17c1349638ba46934ba49db39cf6 to your computer and use it in GitHub Desktop.
Download ZIP
tailwind accordion
Raw
index.html
<body class="bg-grey-400">
<div class="accordion flex flex-col items-center justify-center h-screen">
<!-- Panel 1 -->
<div class="w-3/4">
<input type="checkbox" name="panel" id="panel-1" class="hidden">
<label for="panel-1" class="relative block bg-black text-white p-4 shadow border-b border-grey bg-indigo-700">Panel 1</label>
<div class="accordion__content overflow-hidden bg-indigo-600 text-white">
<h2 class="accordion__header pt-4 pl-4">Header</h2>
<p class="accordion__body p-4" id="panel1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<!-- Panel 2 -->
<div class="w-3/4">
<input type="checkbox" name="panel" id="panel-2" class="hidden">
<label for="panel-2" class="relative block bg-black text-white p-4 shadow border-b border-grey bg-indigo-700">Panel 2</label>
<div class="accordion__content overflow-hidden bg-grey-lighter">
<h2 class="accordion__header pt-4 pl-4">Header</h2>
<p class="accordion__body p-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<!-- Panel 3 -->
<div class="w-3/4">
<input type="checkbox" name="panel" id="panel-3" class="hidden">
<label for="panel-3" class="relative block bg-black text-white p-4 shadow border-b border-grey bg-indigo-700">Panel 3</label>
<div class="accordion__content overflow-hidden bg-grey-lighter">
<h2 class="accordion__header pt-4 pl-4">Header</h2>
<p class="accordion__body p-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="mt-4">
<div class="list-container">
<div class="list-items flex flex-col sm:flex-row items-center justify-between max-w-xl mx-auto border-b py-4 dark:bg-gray-700 rounded-md my-1 px-4">
<div class="flex flex-row items-center space-x-4">
<img src="https://i.pravatar.cc/150?img=31" alt="default img" class="h-12 w-12 rounded-full" />
<div>
<h1 class="tracking-tight dark:text-gray-100">Scarlet Johnson</h1>
<p class="text-gray-500 font-light dark:text-gray-300">[email protected]</p>
</div>
</div>
<div>
<button class="bg-green-100 rounded-md px-4 py-1 text-green-800 text-sm font-semibold mt-4 sm:mt-0">Complete KYC</button>
</div>
</div>
<div class="list-items flex flex-col sm:flex-row items-center justify-between max-w-xl mx-auto border-b py-4 dark:bg-gray-700 rounded-md my-1 px-4">
<div class="flex flex-row items-center space-x-4">
<img src="https://i.pravatar.cc/150?img=7" alt="default img" class="h-12 w-12 rounded-full" />
<div>
<h1 class="tracking-tight dark:text-gray-100">Tony Stark</h1>
<p class="text-gray-500 font-light dark:text-gray-300">[email protected]</p>
</div>
</div>
<div>
<button class="bg-green-100 rounded-md px-4 py-1 text-green-800 text-sm font-semibold mt-4 sm:mt-0">Complete KYC</button>
</div>
</div>
<div class="list-items flex flex-col sm:flex-row items-center justify-between max-w-xl mx-auto border-b py-4 dark:bg-gray-700 rounded-md my-1 px-4">
<div class="flex flex-row items-center space-x-4">
<img src="https://i.pravatar.cc/150?img=8" alt="default img" class="h-12 w-12 rounded-full" />
<div>
<h1 class="tracking-tight dark:text-gray-100">Hawkeye Vision</h1>
<p class="text-gray-500 font-light dark:text-gray-300"">[email protected]</p>
</div>
</div>
<div>
<button class="bg-green-500 rounded-md px-4 py-1 text-green-100 text-sm font-semibold mt-4 sm:mt-0">KYC Completed</button>
</div>
</div>
</div>
</div>
</body>
Raw
style.css
.bg-grey-400 { background-color: #c4c7cf; }
label:after {
content: '+';
position: absolute;
right: 1em;
color: #fff;
}
input:checked + label:after {
content: '-';
line-height: .8em;
}
.accordion__content{
max-height: 0em;
transition: all 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}
input[name='panel']:checked ~ .accordion__content {
/* Get this as close to what height you expect */
max-height: 50em;
}
Raw
styles
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment