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

## Table

- Components
- Table

## Basic Table

Code

Tables display information in a way that's easy to scan, so that users can look for patterns and insights. Check out code for detail of usage.

# | Name | Job | Favorite Color
--- | --- | --- | ---
1 | Cy Ganderton | Quality Control Specialist | Blue
2 | Hart Hagerty | Desktop Support Technician | Purple
3 | Brice Swyre | Tax Accountant | Red
4 | Marjy Ferencz | Office Assistant I | Crimson

      <div class="is-scrollbar-hidden min-w-full overflow-x-auto">
        <table class="w-full text-left">
          <thead>
            <tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
              <th
                class="whitespace-nowrap px-3 py-3 font-semibold uppercase text-slate-800 dark:text-navy-100 lg:px-5"
              >
                #
              </th>
              <th
                class="whitespace-nowrap px-3 py-3 font-semibold uppercase text-slate-800 dark:text-navy-100 lg:px-5"
              >
                Name
              </th>
              <th
                class="whitespace-nowrap px-3 py-3 font-semibold uppercase text-slate-800 dark:text-navy-100 lg:px-5"
              >
                Job
              </th>
              <th
                class="whitespace-nowrap px-3 py-3 font-semibold uppercase text-slate-800 dark:text-navy-100 lg:px-5"
              >
                Favorite Color
              </th>
            </tr>
          </thead>
          <tbody>
            <tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">1</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Cy Ganderton</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                Quality Control Specialist
              </td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Blue</td>
            </tr>
            <tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">2</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Hart Hagerty</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                Desktop Support Technician
              </td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Purple</td>
            </tr>
            <tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">3</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Brice Swyre</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Tax Accountant</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Red</td>
            </tr>
            <tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">4</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Marjy Ferencz</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                Office Assistant I
              </td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Crimson</td>
            </tr>
          </tbody>
        </table>
      </div>

## Bordered Table

Code

Tables display information in a way that's easy to scan, so that users can look for patterns and insights. Check out code for detail of usage.

# | Name | Job | Favorite Color
--- | --- | --- | ---
1 | Cy Ganderton | Quality Control Specialist | Blue
2 | Hart Hagerty | Desktop Support Technician | Purple
3 | Brice Swyre | Tax Accountant | Red
4 | Marjy Ferencz | Office Assistant I | Crimson

      <div
        class="is-scrollbar-hidden min-w-full overflow-x-auto rounded-lg border border-slate-200 dark:border-navy-500"
      >
        <table class="w-full text-left">
          <thead>
            <tr>
              <th
                class="whitespace-nowrap border border-t-0 border-l-0 border-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:border-navy-500 dark:text-navy-100 lg:px-5"
              >
                #
              </th>
              <th
                class="whitespace-nowrap border border-t-0 border-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:border-navy-500 dark:text-navy-100 lg:px-5"
              >
                Name
              </th>
              <th
                class="whitespace-nowrap border border-t-0 border-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:border-navy-500 dark:text-navy-100 lg:px-5"
              >
                Job
              </th>
              <th
                class="whitespace-nowrap border border-t-0 border-r-0 border-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:border-navy-500 dark:text-navy-100 lg:px-5"
              >
                Favorite Color
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td
                class="whitespace-nowrap border border-l-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
              >
                1
              </td>
              <td
                class="whitespace-nowrap border border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
              >
                Cy Ganderton
              </td>
              <td
                class="whitespace-nowrap border border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
              >
                Quality Control Specialist
              </td>
              <td
                class="whitespace-nowrap border border-r-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
              >
                Blue
              </td>
            </tr>
            <tr>
              <td
                class="whitespace-nowrap border border-l-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
              >
                2
              </td>
              <td
                class="whitespace-nowrap border border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
              >
                Hart Hagerty
              </td>
              <td
                class="whitespace-nowrap border border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
              >
                Desktop Support Technician
              </td>
              <td
                class="whitespace-nowrap border border-r-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
              >
                Purple
              </td>
            </tr>
            <tr>
              <td
                class="whitespace-nowrap border border-l-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
              >
                3
              </td>
              <td
                class="whitespace-nowrap border border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
              >
                Brice Swyre
              </td>
              <td
                class="whitespace-nowrap border border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
              >
                Tax Accountant
              </td>
              <td
                class="whitespace-nowrap border border-r-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
              >
                Red
              </td>
            </tr>
            <tr>
              <td
                class="whitespace-nowrap border border-b-0 border-l-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
              >
                4
              </td>
              <td
                class="whitespace-nowrap border border-b-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
              >
                Marjy Ferencz
              </td>
              <td
                class="whitespace-nowrap border border-b-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
              >
                Office Assistant I
              </td>
              <td
                class="whitespace-nowrap border border-b-0 border-r-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
              >
                Crimson
              </td>
            </tr>
          </tbody>
        </table>
      </div>

## Hoverable Rows

Code

Tables display information in a way that's easy to scan, so that users can look for patterns and insights. Check out code for detail of usage.

# | Name | Job | Favorite Color
--- | --- | --- | ---
1 | Cy Ganderton | Quality Control Specialist | Blue
2 | Hart Hagerty | Desktop Support Technician | Purple
3 | Brice Swyre | Tax Accountant | Red
4 | Marjy Ferencz | Office Assistant I | Crimson

      <div class="is-scrollbar-hidden min-w-full overflow-x-auto">
        <table class="is-hoverable w-full text-left">
          <thead>
            <tr>
              <th
                class="whitespace-nowrap rounded-l-lg bg-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
              >
                #
              </th>
              <th
                class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
              >
                Name
              </th>
              <th
                class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
              >
                Job
              </th>
              <th
                class="whitespace-nowrap rounded-r-lg bg-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
              >
                Favorite Color
              </th>
            </tr>
          </thead>
          <tbody>
            <tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
              <td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">1</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Cy Ganderton</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                Quality Control Specialist
              </td>
              <td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">Blue</td>
            </tr>
            <tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
              <td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">2</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Hart Hagerty</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                Desktop Support Technician
              </td>
              <td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">
                Purple
              </td>
            </tr>
            <tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
              <td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">3</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Brice Swyre</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Tax Accountant</td>
              <td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">Red</td>
            </tr>
            <tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
              <td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">4</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Marjy Ferencz</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                Office Assistant I
              </td>
              <td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">
                Crimson
              </td>
            </tr>
          </tbody>
        </table>
      </div>

## Zebra Table

Code

Tables display information in a way that's easy to scan, so that users can look for patterns and insights. Check out code for detail of usage.

# | Name | Job | Favorite Color
--- | --- | --- | ---
1 | Cy Ganderton | Quality Control Specialist | Blue
2 | Hart Hagerty | Desktop Support Technician | Purple
3 | Brice Swyre | Tax Accountant | Red
4 | Marjy Ferencz | Office Assistant I | Crimson

      <div class="is-scrollbar-hidden min-w-full overflow-x-auto">
        <table class="is-zebra w-full text-left">
          <thead>
            <tr>
              <th
                class="whitespace-nowrap rounded-l-lg bg-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
              >
                #
              </th>
              <th
                class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
              >
                Name
              </th>
              <th
                class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
              >
                Job
              </th>
              <th
                class="whitespace-nowrap rounded-r-lg bg-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
              >
                Favorite Color
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">1</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Cy Ganderton</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                Quality Control Specialist
              </td>
              <td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">Blue</td>
            </tr>
            <tr>
              <td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">2</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Hart Hagerty</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                Desktop Support Technician
              </td>
              <td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">
                Purple
              </td>
            </tr>
            <tr>
              <td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">3</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Brice Swyre</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Tax Accountant</td>
              <td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">Red</td>
            </tr>
            <tr>
              <td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">4</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Marjy Ferencz</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                Office Assistant I
              </td>
              <td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">
                Crimson
              </td>
            </tr>
          </tbody>
        </table>
      </div>

## Full Width Table

Code

Tables display information in a way that's easy to scan, so that users can look for patterns and insights. Check out code for detail of usage.

# | Name | Job | Favorite Color
--- | --- | --- | ---
1 | Cy Ganderton | Quality Control Specialist | Blue
2 | Hart Hagerty | Desktop Support Technician | Purple
3 | Brice Swyre | Tax Accountant | Red
4 | Marjy Ferencz | Office Assistant I | Crimson

      <div class="is-scrollbar-hidden min-w-full overflow-x-auto">
        <table class="is-hoverable w-full text-left">
          <thead>
            <tr>
              <th
                class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
              >
                #
              </th>
              <th
                class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
              >
                Name
              </th>
              <th
                class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
              >
                Job
              </th>
              <th
                class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
              >
                Favorite Color
              </th>
            </tr>
          </thead>
          <tbody>
            <tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">1</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Cy Ganderton</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                Quality Control Specialist
              </td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Blue</td>
            </tr>
            <tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">2</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Hart Hagerty</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                Desktop Support Technician
              </td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Purple</td>
            </tr>
            <tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">3</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Brice Swyre</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Tax Accountant</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Red</td>
            </tr>
            <tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">4</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Marjy Ferencz</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                Office Assistant I
              </td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Crimson</td>
            </tr>
          </tbody>
        </table>
      </div>

## Full Width Zebra Table

Code

Tables display information in a way that's easy to scan, so that users can look for patterns and insights. Check out code for detail of usage.

# | Name | Job | Favorite Color
--- | --- | --- | ---
1 | Cy Ganderton | Quality Control Specialist | Blue
2 | Hart Hagerty | Desktop Support Technician | Purple
3 | Brice Swyre | Tax Accountant | Red
4 | Marjy Ferencz | Office Assistant I | Crimson

      <div class="is-scrollbar-hidden min-w-full overflow-x-auto">
        <table class="is-zebra w-full text-left">
          <thead>
            <tr>
              <th
                class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
              >
                #
              </th>
              <th
                class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
              >
                Name
              </th>
              <th
                class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
              >
                Job
              </th>
              <th
                class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
              >
                Favorite Color
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">1</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Cy Ganderton</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                Quality Control Specialist
              </td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Blue</td>
            </tr>
            <tr>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">2</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Hart Hagerty</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                Desktop Support Technician
              </td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Purple</td>
            </tr>
            <tr>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">3</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Brice Swyre</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Tax Accountant</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Red</td>
            </tr>
            <tr>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">4</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Marjy Ferencz</td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                Office Assistant I
              </td>
              <td class="whitespace-nowrap px-4 py-3 sm:px-5">Crimson</td>
            </tr>
          </tbody>
        </table>
      </div>