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

## Tag

- Elements
- Tag

## Tag

Code

Tags are compact elements that represent an input, attribute, or action. tags allow users to enter information, make selections, filter content, or trigger actions. Check out code for detail of usage.

Default Primary Secondary Info Success Warning Error Light

      <a
        href="#"
        class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
      >
        Default
      </a>
      <a
        href="#"
        class="tag bg-primary text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
      >
        Primary
      </a>
      <a
        href="#"
        class="tag bg-secondary text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90"
      >
        Secondary
      </a>
      <a
        href="#"
        class="tag bg-info text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90"
      >
        Info
      </a>
      <a
        href="#"
        class="tag bg-success text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90"
      >
        Success
      </a>
      <a
        href="#"
        class="tag bg-warning text-white hover:bg-warning-focus focus:bg-warning-focus active:bg-warning-focus/90"
      >
        Warning
      </a>
      <a
        href="#"
        class="tag bg-error text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
      >
        Error
      </a>
      <a
        href="#"
        class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80"
      >
        Light
      </a>

## Rounded Tag

Code

Tags can have a rounded shape. To do this, you should use the `rounded-full` utility Check out code for detail of usage.

Default Primary Secondary Info Success Warning Error Light

      <a
        href="#"
        class="tag rounded-full bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
      >
        Default
      </a>
      <a
        href="#"
        class="tag rounded-full bg-primary text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
      >
        Primary
      </a>
      <a
        href="#"
        class="tag rounded-full bg-secondary text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90"
      >
        Secondary
      </a>
      <a
        href="#"
        class="tag rounded-full bg-info text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90"
      >
        Info
      </a>
      <a
        href="#"
        class="tag rounded-full bg-success text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90"
      >
        Success
      </a>
      <a
        href="#"
        class="tag rounded-full bg-warning text-white hover:bg-warning-focus focus:bg-warning-focus active:bg-warning-focus/90"
      >
        Warning
      </a>
      <a
        href="#"
        class="tag rounded-full bg-error text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
      >
        Error
      </a>
      <a
        href="#"
        class="tag rounded-full bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80"
      >
        Light
      </a>

## Bordered Tag

Code

Tags can have a border. Check out code for detail of usage.

Primary Secondary Info Success Warning Error

      <a
        href="#"
        class="tag rounded-full border border-primary/30 bg-primary/10 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:border-accent-light/30 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25"
      >
        Primary
      </a>

      <a
        href="#"
        class="tag rounded-full border border-secondary/30 bg-secondary/10 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:border-secondary-light/30 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25"
      >
        Secondary
      </a>

      <a
        href="#"
        class="tag rounded-full border border-info/30 bg-info/10 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
      >
        Info
      </a>

      <a
        href="#"
        class="tag rounded-full border border-success/30 bg-success/10 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
      >
        Success
      </a>

      <a
        href="#"
        class="tag rounded-full border border-warning/30 bg-warning/10 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
      >
        Warning
      </a>

      <a
        href="#"
        class="tag rounded-full border border-error/30 bg-error/10 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25"
      >
        Error
      </a>

## Tag Group

Code

Tag group are an easy way to group a series of tags together. Check out code for detail of usage.

Primary 55
Message 65
Warnings 35
Message 14
Star
Remove
Default

      <div class="flex -space-x-px">
        <a
          href="#"
          class="tag rounded-r-none bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
        >
          Primary
        </a>
        <a
          href="#"
          class="tag rounded-l-none bg-primary text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
        >
          55
        </a>
      </div>

      <div class="flex -space-x-px">
        <a
          href="#"
          class="tag rounded-r-none bg-info/10 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
        >
          Message
        </a>
        <a
          href="#"
          class="tag rounded-l-none bg-info text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90"
        >
          65
        </a>
      </div>

      <div class="flex -space-x-px">
        <a
          href="#"
          class="tag rounded-full rounded-r-none border border-warning text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
        >
          Warnings
        </a>
        <a
          href="#"
          class="tag rounded-full rounded-l-none border border-warning bg-warning/10 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
        >
          35
        </a>
      </div>

      <div class="flex -space-x-px">
        <a
          href="#"
          class="tag rounded-r-none bg-success/10 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
        >
          Message
        </a>
        <a href="#" class="badge bg-success text-white shadow-lg shadow-success/50">
          14
        </a>
      </div>

      <div class="flex -space-x-px">
        <a
          href="#"
          class="tag rounded-r-none bg-slate-150 px-4 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
        >
          Star
        </a>
        <a
          href="#"
          class="tag rounded-l-none bg-secondary text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="size-4"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
            />
          </svg>
        </a>
      </div>

      <div class="flex -space-x-px">
        <div class="badge rounded-r-none border border-error text-error">
          Remove
        </div>
        <a
          href="#"
          class="tag rounded-l-none bg-error text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="size-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </a>
      </div>

      <div
        class="badge space-x-2 rounded-full bg-slate-150 text-slate-800 dark:bg-navy-500 dark:text-navy-100"
      >
        <i
          class="fa-solid fa-person-biking text-sm text-slate-600 dark:text-navy-200"
        ></i>
        <span>Default</span>
        <button
          class="btn size-4.5 rounded-full bg-black/20 p-0 hover:bg-black/30 focus:bg-black/30 dark:bg-white/20 dark:hover:bg-white/30 dark:focus:bg-white/30"
        >
          <i class="fa-solid fa-xmark dark:text-navy-50"></i>
        </button>
      </div>