Kanban

Analytics

Chat

Files

Crypto

Banking

Todo

Orders

Recent

View All
Chat App
File Manager App
Email App
Kanban Board
Todo App
Crypto Dashboard
Banking Dashboard
Analytics Dashboard
Influencer Dashboard

25 May, 2022

Projects

Activity

## Banking cards

$2,139.22

**** **** **** 8945

$2,139.22

**** **** **** 8945

$2,139.22

**** **** **** 8945

## Pinned Apps

Kanban

Analytics

Chat

Files

Banking

11.3 hr

Working Hours

71%

13 /22

Completed tasks

49%

## Stock Market

## BTC

Bitcoin

60.33$

+3.3%

## SOL

Solana

20.56$

+4.11%

## Latest News

What is Tailwind CSS?

John D.

2 min read

Tailwind CSS Card Example

Travis F.

5 min read

10 Tips for Making a Good Camera Even Better

Alfredo E .

4 min read

## Settings

Dark Mode Monochrome Mode

35GB of 1TB

Upgrade

14

Pending

36

Completed

143

In Progress

279

Total

LMS App Design

Updated at 7 Sep

25%

jd

Store Dashboard

Updated at 11 Sep

49%

dv

Chat Mobile App

Updated at 19 Sep

13%

gt

NFT Marketplace App

Updated at 5 Sep

78%

jd

Today

6hr 22m

1. User Photo Changed

   12 minute ago

   John Doe changed his avatar photo

2. Images Added

   1 hour ago

   Mores Clarke added new image gallery

   Category: #Tag #Category

3. Design Completed

   3 hours ago

   Robert Nolan completed the design of the CRM application

   File_final.fig
   UI/UX CRM Dashboard

4. ER Diagram

   a day ago

   Team completed the ER diagram app

   Members:

   jd

5. Weekly Report

   a day ago

   The weekly report was uploaded

## Collapse

- Components
- Collapse

## Basic Collapse

Code

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.

Tag 1 Tag 2

Collapse Item 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

Tag 1 Tag 2

Collapse Item 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

Tag 1 Tag 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

Code

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.

Tag 1 Tag 2

Collapse Item 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

Tag 1 Tag 2

Collapse Item 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

Tag 1 Tag 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

Code

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.

Tag 1 Tag 2

Collapse Item 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

Tag 1 Tag 2

Collapse Item 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

Tag 1 Tag 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

Code

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 size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <div
                      class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                    >
                      jd
                    </div>
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>
                </div>
                <button
                  class="btn size-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="size-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 size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <div
                      class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                    >
                      jd
                    </div>
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>
                </div>
                <button
                  class="btn size-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="size-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 size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <div
                      class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                    >
                      jd
                    </div>
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>
                </div>
                <button
                  class="btn size-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="size-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

Code

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.

Tag 1 Tag 2

Collapse Item 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

Tag 1 Tag 2

Collapse Item 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

Tag 1 Tag 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

Code

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-hidden transition-all"
            >
              <div class="avatar size-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 size-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 size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <div
                      class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                    >
                      jd
                    </div>
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>
                </div>
                <button
                  class="btn size-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="size-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-hidden transition-all"
            >
              <div class="avatar size-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 size-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 size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <div
                      class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                    >
                      jd
                    </div>
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>
                </div>
                <button
                  class="btn size-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="size-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-hidden transition-all"
            >
              <div class="avatar size-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 size-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 size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <div
                      class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                    >
                      jd
                    </div>
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>
                </div>
                <button
                  class="btn size-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="size-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>