Basic Collapse
The Collapse component is used to create regions of content that can expand/collapse with a simple animation. It helps to hide content that's not immediately relevant to the user. Check out code for detail of usage.
Collapse Item 1
Collapse Item 2
<div class="flex flex-col">
<div x-data="{expanded:false}">
<div
@click="expanded = !expanded"
class="flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100"
>
<p>Collapse Item 1</p>
<div
:class="expanded && '-rotate-180'"
class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div x-collapse x-show="expanded">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
</p>
<div class="flex space-x-2 pt-3">
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
<div x-data="{expanded:false}">
<div
@click="expanded = !expanded"
class="flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100"
>
<p>Collapse Item 2</p>
<div
:class="expanded && '-rotate-180'"
class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div x-collapse x-show="expanded">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
</p>
<div class="flex space-x-2 pt-3">
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
<div x-data="{expanded:false}">
<div
@click="expanded = !expanded"
class="flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100"
>
<p>Collapse Item 3</p>
<div
:class="expanded && '-rotate-180'"
class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div x-collapse x-show="expanded">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
</p>
<div class="flex space-x-2 pt-3">
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
</div>
Border Bottom
The Collapse component is used to create regions of content that can expand/collapse with a simple animation. It helps to hide content that's not immediately relevant to the user. Check out code for detail of usage.
Collapse Item 1
Collapse Item 2
<div
class="flex flex-col divide-y divide-slate-150 dark:divide-navy-500"
>
<div x-data="{expanded:false}">
<div
@click="expanded = !expanded"
class="flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100"
>
<p>Collapse Item 1</p>
<div
:class="expanded && '-rotate-180'"
class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div x-collapse x-show="expanded">
<div class="pb-4">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
</p>
<div class="flex space-x-2 pt-3">
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
<div x-data="{expanded:false}">
<div
@click="expanded = !expanded"
class="flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100"
>
<p>Collapse Item 2</p>
<div
:class="expanded && '-rotate-180'"
class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div x-collapse x-show="expanded">
<div class="pb-4">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
</p>
<div class="flex space-x-2 pt-3">
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
<div x-data="{expanded:false}">
<div
@click="expanded = !expanded"
class="flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100"
>
<p>Collapse Item 3</p>
<div
:class="expanded && '-rotate-180'"
class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div x-collapse x-show="expanded">
<div class="pb-4">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
</p>
<div class="flex space-x-2 pt-3">
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
</div>
Full Bordered
The Collapse component is used to create regions of content that can expand/collapse with a simple animation. It helps to hide content that's not immediately relevant to the user. Check out code for detail of usage.
Collapse Item 1
Collapse Item 2
<div
class="flex flex-col divide-y divide-slate-150 rounded-lg border border-slate-150 dark:divide-navy-500 dark:border-navy-500"
>
<div x-data="{expanded:false}">
<div
@click="expanded = !expanded"
class="flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
>
<p>Collapse Item 1</p>
<div
:class="expanded && '-rotate-180'"
class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div x-collapse x-show="expanded">
<div class="px-4 pb-4 sm:px-5">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
</p>
<div class="flex space-x-2 pt-3">
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
<div x-data="{expanded:false}">
<div
@click="expanded = !expanded"
class="flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
>
<p>Collapse Item 2</p>
<div
:class="expanded && '-rotate-180'"
class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div x-collapse x-show="expanded">
<div class="px-4 pb-4 sm:px-5">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
</p>
<div class="flex space-x-2 pt-3">
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
<div x-data="{expanded:false}">
<div
@click="expanded = !expanded"
class="flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
>
<p>Collapse Item 3</p>
<div
:class="expanded && '-rotate-180'"
class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div x-collapse x-show="expanded">
<div class="px-4 pb-4 sm:px-5">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
</p>
<div class="flex space-x-2 pt-3">
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
</div>
Divided Items
The Collapse component is used to create regions of content that can expand/collapse with a simple animation. It helps to hide content that's not immediately relevant to the user. Check out code for detail of usage.
Collapse Item 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.
jd
Collapse Item 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.
jd
Collapse Item 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.
jd
<div
class="flex flex-col space-y-4 rounded-lg sm:space-y-5 lg:space-y-6"
>
<div
x-data="{expanded:false}"
class="rounded-lg border border-slate-150 dark:border-navy-500"
>
<div
@click="expanded = !expanded"
class="flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
>
<p>Collapse Item 1</p>
<div
:class="expanded && '-rotate-180'"
class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div x-collapse x-show="expanded">
<div class="px-4 pb-4 sm:px-5">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
</p>
<div class="mt-4 flex justify-between">
<div class="flex flex-wrap -space-x-2">
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<div
class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
jd
</div>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
</div>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 rotate-45"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
<div
x-data="{expanded:false}"
class="rounded-lg border border-slate-150 dark:border-navy-500"
>
<div
@click="expanded = !expanded"
class="flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
>
<p>Collapse Item 2</p>
<div
:class="expanded && '-rotate-180'"
class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div x-collapse x-show="expanded">
<div class="px-4 pb-4 sm:px-5">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
</p>
<div class="mt-4 flex justify-between">
<div class="flex flex-wrap -space-x-2">
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<div
class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
jd
</div>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
</div>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 rotate-45"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
<div
x-data="{expanded:false}"
class="rounded-lg border border-slate-150 dark:border-navy-500"
>
<div
@click="expanded = !expanded"
class="flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
>
<p>Collapse Item 3</p>
<div
:class="expanded && '-rotate-180'"
class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div x-collapse x-show="expanded">
<div class="px-4 pb-4 sm:px-5">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
</p>
<div class="mt-4 flex justify-between">
<div class="flex flex-wrap -space-x-2">
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<div
class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
jd
</div>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
</div>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 rotate-45"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
Primary Collapse
The Collapse component is used to create regions of content that can expand/collapse with a simple animation. It helps to hide content that's not immediately relevant to the user. Check out code for detail of usage.
Collapse Item 1
Collapse Item 2
<div
class="flex flex-col divide-y divide-indigo-400 overflow-hidden rounded-lg border border-primary dark:border-accent"
>
<div x-data="{expanded:false}">
<div
@click="expanded = !expanded"
class="flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5"
>
<p>Collapse Item 1</p>
<div
:class="expanded && '-rotate-180'"
class="text-sm font-normal leading-none text-indigo-100 transition-transform duration-300"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div x-collapse x-show="expanded">
<div class="px-4 py-4 sm:px-5">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
</p>
<div class="flex space-x-2 pt-3">
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
<div x-data="{expanded:false}">
<div
@click="expanded = !expanded"
class="flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5"
>
<p>Collapse Item 2</p>
<div
:class="expanded && '-rotate-180'"
class="text-sm font-normal leading-none text-indigo-100 transition-transform duration-300"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div x-collapse x-show="expanded">
<div class="px-4 py-4 sm:px-5">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
</p>
<div class="flex space-x-2 pt-3">
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
<div x-data="{expanded:false}">
<div
@click="expanded = !expanded"
class="flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5"
>
<p>Collapse Item 3</p>
<div
:class="expanded && '-rotate-180'"
class="text-sm font-normal leading-none text-indigo-100 transition-transform duration-300"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div x-collapse x-show="expanded">
<div class="px-4 py-4 sm:px-5">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
</p>
<div class="flex space-x-2 pt-3">
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href="#"
class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
</div>
Advanced Collapse
The Collapse component is used to create regions of content that can expand/collapse with a simple animation. It helps to hide content that's not immediately relevant to the user. Check out code for detail of usage.
Simon Tods
Web Developer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.
jd
KG
Konnor Guzman
Frontend Developer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.
jd
Derrick Simmons
UI/UX Designer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.
jd
<div class="flex flex-col space-y-4 sm:space-y-5 lg:space-y-6">
<div
x-data="{expanded:false}"
class="overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500"
>
<div
class="flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5"
>
<div
class="flex items-center space-x-3.5 tracking-wide outline-none transition-all"
>
<div class="avatar h-10 w-10">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div>
<p class="text-slate-700 line-clamp-1 dark:text-navy-100">
Simon Tods
</p>
<p class="text-xs text-slate-500 dark:text-navy-300">
Web Developer
</p>
</div>
</div>
<button
@click="expanded = !expanded"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
:class="expanded && '-rotate-180'"
class="fas fa-chevron-down text-sm transition-transform"
></i>
</button>
</div>
<div x-collapse x-show="expanded">
<div class="px-4 py-4 sm:px-5">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
</p>
<div class="mt-4 flex justify-between">
<div class="flex flex-wrap -space-x-2">
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<div
class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
jd
</div>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
</div>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 rotate-45"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
<div
x-data="{expanded:false}"
class="overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500"
>
<div
class="flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5"
>
<div
class="flex items-center space-x-3.5 tracking-wide outline-none transition-all"
>
<div class="avatar h-10 w-10">
<div
class="is-initial rounded-full bg-warning uppercase text-white"
>
KG
</div>
</div>
<div>
<p class="text-slate-700 line-clamp-1 dark:text-navy-100">
Konnor Guzman
</p>
<p class="text-xs text-slate-500 dark:text-navy-300">
Frontend Developer
</p>
</div>
</div>
<button
@click="expanded = !expanded"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
:class="expanded && '-rotate-180'"
class="fas fa-chevron-down text-sm transition-transform"
></i>
</button>
</div>
<div x-collapse x-show="expanded">
<div class="px-4 py-4 sm:px-5">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
</p>
<div class="mt-4 flex justify-between">
<div class="flex flex-wrap -space-x-2">
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<div
class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
jd
</div>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
</div>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 rotate-45"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
<div
x-data="{expanded:false}"
class="overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500"
>
<div
class="flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5"
>
<div
class="flex items-center space-x-3.5 tracking-wide outline-none transition-all"
>
<div class="avatar h-10 w-10">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div>
<p class="text-slate-700 line-clamp-1 dark:text-navy-100">
Derrick Simmons
</p>
<p class="text-xs text-slate-500 dark:text-navy-300">
UI/UX Designer
</p>
</div>
</div>
<button
@click="expanded = !expanded"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
:class="expanded && '-rotate-180'"
class="fas fa-chevron-down text-sm transition-transform"
></i>
</button>
</div>
<div x-collapse x-show="expanded">
<div class="px-4 py-4 sm:px-5">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
</p>
<div class="mt-4 flex justify-between">
<div class="flex flex-wrap -space-x-2">
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<div
class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
jd
</div>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
</div>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 rotate-45"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>