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

## Badge

- Elements
- Badge

## Badge

Code

Badges are used to inform user of the status of specific data. Check out code for detail of usage.

Default
Primary
Secondary
Info
Success
Warning
Error
Dark
Light

      <div
        class="badge bg-slate-150 text-slate-800 dark:bg-navy-500 dark:text-navy-100"
      >
        Default
      </div>
      <div class="badge bg-primary text-white dark:bg-accent">Primary</div>
      <div class="badge bg-secondary text-white">Secondary</div>
      <div class="badge bg-info text-white">Info</div>
      <div class="badge bg-success text-white">Success</div>
      <div class="badge bg-warning text-white">Warning</div>
      <div class="badge bg-error text-white">Error</div>
      <div class="badge bg-navy-700 text-white dark:bg-navy-900">Dark</div>
      <div class="badge bg-slate-150 text-slate-800">Light</div>

## Rounded Badge

Code

Badges 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
Dark
Light

      <div
        class="badge rounded-full bg-slate-150 text-slate-800 dark:bg-navy-500 dark:text-navy-100"
      >
        Default
      </div>
      <div class="badge rounded-full bg-primary text-white dark:bg-accent">
        Primary
      </div>
      <div class="badge rounded-full bg-secondary text-white">Secondary</div>
      <div class="badge rounded-full bg-info text-white">Info</div>
      <div class="badge rounded-full bg-success text-white">Success</div>
      <div class="badge rounded-full bg-warning text-white">Warning</div>
      <div class="badge rounded-full bg-error text-white">Error</div>
      <div class="badge rounded-full bg-navy-700 text-white dark:bg-navy-900">
        Dark
      </div>
      <div class="badge rounded-full bg-slate-150 text-slate-800">Light</div>

## Glow Badge

Code

Badges can be glow. To do this, you should use colored shadows. Check out code for detail of usage.

Default
Primary
Secondary
Info
Success
Warning
Error

      <div
        class="badge bg-slate-150 text-slate-800 shadow-soft shadow-slate-200/50 dark:bg-navy-500 dark:text-navy-100 dark:shadow-navy-450/50"
      >
        Default
      </div>
      <div
        class="badge bg-primary text-white shadow-soft shadow-primary/50 dark:bg-accent dark:shadow-accent/50"
      >
        Primary
      </div>
      <div class="badge bg-secondary text-white shadow-soft shadow-secondary/50">
        Secondary
      </div>
      <div class="badge bg-info text-white shadow-soft shadow-info/50">Info</div>
      <div class="badge bg-success text-white shadow-soft shadow-success/50">
        Success
      </div>
      <div class="badge bg-warning text-white shadow-soft shadow-warning/50">
        Warning
      </div>
      <div class="badge bg-error text-white shadow-soft shadow-error/50">Error</div>

## Soft Color Badge

Code

Badges can have a soft colors. To do this, you should use some opacity. Check out code for detail of usage.

Primary
Secondary
Info
Success
Warning
Error

      <div
        class="badge bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light"
      >
        Primary
      </div>
      <div
        class="badge bg-secondary/10 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light"
      >
        Secondary
      </div>
      <div class="badge bg-info/10 text-info dark:bg-info/15">Info</div>
      <div class="badge bg-success/10 text-success dark:bg-success/15">Success</div>
      <div class="badge bg-warning/10 text-warning dark:bg-warning/15">Warning</div>
      <div class="badge bg-error/10 text-error dark:bg-error/15">Error</div>

## Outlined Badge

Code

Badges can be outlied. Check out code for detail of usage.

Default
Primary
Secondary
Info
Success
Warning
Error

      <div
        class="badge rounded-full border border-slate-300 text-slate-800 dark:border-navy-450 dark:text-navy-50"
      >
        Default
      </div>
      <div
        class="badge rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
      >
        Primary
      </div>
      <div
        class="badge rounded-full border border-secondary text-secondary dark:border-secondary-light dark:text-secondary-light"
      >
        Secondary
      </div>
      <div class="badge rounded-full border border-info text-info">Info</div>
      <div class="badge rounded-full border border-success text-success">
        Success
      </div>
      <div class="badge rounded-full border border-warning text-warning">
        Warning
      </div>
      <div class="badge rounded-full border border-error text-error">Error</div>

## Badge With Dots

Code

Badges can be a dot attached to it. Check out code for detail of usage.

Default
Primary
Primary
Info
Success
Warning
Error

      <div class="badge space-x-2.5 text-slate-800 dark:text-navy-100">
        <div class="size-2 rounded-full bg-current"></div>
        <span>Default</span>
      </div>
      <div class="badge space-x-2.5 text-primary dark:text-accent-light">
        <div class="size-2 rounded-full bg-current"></div>
        <span>Primary</span>
      </div>
      <div class="badge space-x-2.5 text-secondary dark:text-secondary-light">
        <div class="size-2 rounded-full bg-current"></div>
        <span>Primary</span>
      </div>
      <div class="badge space-x-2.5 text-info">
        <div class="size-2 rounded-full bg-current"></div>
        <span>Info</span>
      </div>
      <div class="badge space-x-2.5 text-success">
        <div class="size-2 rounded-full bg-current"></div>
        <span>Success</span>
      </div>
      <div class="badge space-x-2.5 text-warning">
        <div class="size-2 rounded-full bg-current"></div>
        <span>Warning</span>
      </div>
      <div class="badge space-x-2.5 text-error">
        <div class="size-2 rounded-full bg-current"></div>
        <span>Error</span>
      </div>

## Badge With Dots

Code

Badges can have a soft colors and a dot attached to it. Check out code for detail of usage.

Primary
Primary
Info
Success
Warning
Error

      <div
        class="badge space-x-2.5 rounded-full bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light"
      >
        <div class="size-2 rounded-full bg-current"></div>
        <span>Primary</span>
      </div>
      <div
        class="badge space-x-2.5 rounded-full bg-secondary/10 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light"
      >
        <div class="size-2 rounded-full bg-current"></div>
        <span>Primary</span>
      </div>
      <div
        class="badge space-x-2.5 rounded-full bg-info/10 text-info dark:bg-info/15"
      >
        <div class="size-2 rounded-full bg-current"></div>
        <span>Info</span>
      </div>
      <div
        class="badge space-x-2.5 rounded-full bg-success/10 text-success dark:bg-success/15"
      >
        <div class="size-2 rounded-full bg-current"></div>
        <span>Success</span>
      </div>
      <div
        class="badge space-x-2.5 rounded-full bg-warning/10 text-warning dark:bg-warning/15"
      >
        <div class="size-2 rounded-full bg-current"></div>
        <span>Warning</span>
      </div>
      <div
        class="badge space-x-2.5 rounded-full bg-error/10 text-error dark:bg-error/15"
      >
        <div class="size-2 rounded-full bg-current"></div>
        <span>Error</span>
      </div>

## Badge With Icon

Code

Badges can have an icon. Badges components work well with FontAwesome and Heroicon Icons. Check out code for detail of usage.

Default
Primary
Secondary
Warning
Remove

      <div
        class="badge space-x-2 bg-slate-150 text-slate-800 dark:bg-navy-500 dark:text-navy-100"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="size-4"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            fill-rule="evenodd"
            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z"
            clip-rule="evenodd"
          ></path>
        </svg>
        <span>Default</span>
      </div>
      <div class="badge space-x-2 bg-primary text-white dark:bg-accent">
        <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"
          ></path>
        </svg>
        <span>Primary</span>
      </div>
      <div class="badge space-x-2 bg-secondary text-white">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="size-4"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            fill-rule="evenodd"
            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z"
            clip-rule="evenodd"
          ></path>
        </svg>
        <span>Secondary</span>
      </div>
      <div class="badge rounded-full bg-info text-white">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="size-4"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            d="M5.5 16a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 16h-8z"
          ></path>
        </svg>
      </div>
      <div class="badge bg-success text-white">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="size-4"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            fill-rule="evenodd"
            d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
            clip-rule="evenodd"
          ></path>
        </svg>
      </div>
      <div
        class="badge space-x-2 bg-warning text-white shadow-soft shadow-warning/50"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-5"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            fill-rule="evenodd"
            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
            clip-rule="evenodd"
          />
        </svg>
        <span>Warning</span>
      </div>
      <div class="badge space-x-2 bg-error text-white">
        <span>Remove</span>
        <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>
      </div>