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

## Alert

- Elements
- Alert

## Basic Alert

Code

The alert component is used to convey important information to the user through the use of contextual types, icons, and colors

This is simple alert
This is simple alert
This is simple alert
This is simple alert
This is simple alert
This is simple alert
This is simple alert

      <div
        class="alert flex rounded-lg bg-slate-200 px-4 py-4 text-slate-600 dark:bg-navy-500 dark:text-navy-100 sm:px-5"
      >
        This is simple alert
      </div>

      <div
        class="alert flex rounded-lg bg-primary px-4 py-4 text-white dark:bg-accent sm:px-5"
      >
        This is simple alert
      </div>

      <div class="alert flex rounded-lg bg-secondary px-4 py-4 text-white sm:px-5">
        This is simple alert
      </div>

      <div class="alert flex rounded-lg bg-info px-4 py-4 text-white sm:px-5">
        This is simple alert
      </div>

      <div class="alert flex rounded-lg bg-success px-4 py-4 text-white sm:px-5">
        This is simple alert
      </div>

      <div class="alert flex rounded-lg bg-warning px-4 py-4 text-white sm:px-5">
        This is simple alert
      </div>

      <div class="alert flex rounded-lg bg-error px-4 py-4 text-white sm:px-5">
        This is simple alert
      </div>

## Outlined Alert

Code

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

This is simple alert
This is simple alert
This is simple alert
This is simple alert
This is simple alert
This is simple alert
This is simple alert

      <div
        class="alert flex rounded-lg border border-slate-300 px-4 py-4 text-slate-800 dark:border-navy-450 dark:text-navy-50 sm:px-5"
      >
        This is simple alert
      </div>

      <div
        class="alert flex rounded-lg border border-primary px-4 py-4 text-primary dark:border-accent dark:text-accent-light sm:px-5"
      >
        This is simple alert
      </div>

      <div
        class="alert flex rounded-lg border border-secondary px-4 py-4 text-secondary dark:border-secondary dark:text-secondary-light sm:px-5"
      >
        This is simple alert
      </div>

      <div
        class="alert flex rounded-lg border border-info px-4 py-4 text-info sm:px-5"
      >
        This is simple alert
      </div>

      <div
        class="alert flex rounded-lg border border-success px-4 py-4 text-success sm:px-5"
      >
        This is simple alert
      </div>

      <div
        class="alert flex rounded-lg border border-warning px-4 py-4 text-warning sm:px-5"
      >
        This is simple alert
      </div>

      <div
        class="alert flex rounded-lg border border-error px-4 py-4 text-error sm:px-5"
      >
        This is simple alert
      </div>

## Outlined Alert

Code

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

This is simple alert
This is simple alert
This is simple alert
This is simple alert
This is simple alert
This is simple alert

      <div
        class="alert flex rounded-full bg-primary/10 py-4 px-4 text-primary dark:bg-accent-light/15 dark:text-accent-light sm:px-5"
      >
        This is simple alert
      </div>

      <div
        class="alert flex rounded-full bg-secondary/10 py-4 px-4 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light sm:px-5"
      >
        This is simple alert
      </div>

      <div
        class="alert flex rounded-full bg-info/10 py-4 px-4 text-info dark:bg-info/15 sm:px-5"
      >
        This is simple alert
      </div>

      <div
        class="alert flex rounded-full bg-success/10 py-4 px-4 text-success dark:bg-success/15 sm:px-5"
      >
        This is simple alert
      </div>

      <div
        class="alert flex rounded-full bg-warning/10 py-4 px-4 text-warning dark:bg-warning/15 sm:px-5"
      >
        This is simple alert
      </div>

      <div
        class="alert flex rounded-full bg-error/10 py-4 px-4 text-error dark:bg-error/15 sm:px-5"
      >
        This is simple alert
      </div>

## Bordered Alert

Code

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

This is simple alert
This is simple alert
This is simple alert
This is simple alert
This is simple alert

This is simple alert

      <div
        class="alert flex rounded-full border border-primary bg-primary/10 py-4 px-4 text-primary dark:border-accent dark:bg-accent-light/15 dark:text-accent-light sm:px-5"
      >
        This is simple alert
      </div>

      <div
        class="alert flex overflow-hidden rounded-lg bg-secondary/10 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light"
      >
        <div class="w-1.5 bg-secondary"></div>
        <div class="p-4">This is simple alert</div>
      </div>

      <div
        class="alert flex overflow-hidden rounded-lg border border-info text-info"
      >
        <div class="bg-info p-3 text-white">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="size-5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
        </div>
        <div class="px-4 py-3 sm:px-5">This is simple alert</div>
      </div>

      <div
        class="alert flex rounded-lg border border-success/30 bg-success/10 py-4 px-4 text-success sm:px-5"
      >
        This is simple alert
      </div>

      <div
        class="alert flex overflow-hidden rounded-lg bg-warning/10 text-warning dark:bg-warning/15"
      >
        <div class="flex flex-1 items-center space-x-3 p-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="size-5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
            />
          </svg>
          <div class="flex-1">This is simple alert</div>
        </div>

        <div class="w-1.5 bg-warning"></div>
      </div>

      <div
        class="alert flex space-x-2 rounded-lg border border-error px-4 py-4 text-error"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="size-5"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            fill-rule="evenodd"
            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
            clip-rule="evenodd"
          />
        </svg>
        <p>This is simple alert</p>
      </div>

## Dismissable Alert

Code

Alerts can be dismissable. Check out code for detail of usage.

This is simple alert

Lorem ipsum dolor sit amet consectetur.

- Remove
- Another Action
- Something else

- Separated Link

Lorem ipsum dolor sit amet consectetur.

      <div class="space-y-4">
        <div
          x-data="{isShow:true}"
          :class="!isShow && 'opacity-0 transition-opacity duration-300'"
          class="alert flex items-center justify-between overflow-hidden rounded-lg border border-info text-info"
        >
          <div class="flex">
            <div class="bg-info p-3 text-white">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
            </div>
            <div class="px-4 py-3 sm:px-5">This is simple alert</div>
          </div>
          <div class="px-2">
            <button
              @click="isShow = false; setTimeout(()=>$root.remove(),300)"
              class="btn size-7 rounded-full p-0 font-medium text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
            >
              <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>
            </button>
          </div>
        </div>

        <div
          x-data="{isShow:true}"
          data-alert-root
          :class="!isShow && 'opacity-0 transition-opacity duration-300'"
          class="alert flex items-center justify-between overflow-hidden rounded-lg bg-navy-900 py-4 px-4 text-slate-200 dark:text-navy-100 sm:px-5"
        >
          <p>Lorem ipsum dolor sit amet consectetur.</p>

          <div
            x-data="usePopper({placement:'bottom-end',offset:4})"
            @click.outside="isShowPopper && (isShowPopper = false)"
            class="inline-flex"
          >
            <button
              x-ref="popperRef"
              @click="isShowPopper = !isShowPopper"
              class="btn -mr-1.5 size-7 shrink-0 rounded-full p-0 text-white hover:bg-white/20 focus:bg-white/20 active:bg-white/25"
            >
              <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="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
                />
              </svg>
            </button>
            <div
              x-ref="popperRoot"
              class="popper-root"
              :class="isShowPopper && 'show'"
            >
              <div
                class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
              >
                <ul>
                  <li>
                    <a
                      @click="isShow = false; setTimeout(()=>$el.closest('[data-alert-root]').remove(),300)"
                      href="#"
                      class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
                      >Remove</a
                    >
                  </li>
                  <li>
                    <a
                      href="#"
                      class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
                      >Another Action</a
                    >
                  </li>
                  <li>
                    <a
                      href="#"
                      class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
                      >Something else</a
                    >
                  </li>
                </ul>
                <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
                <ul>
                  <li>
                    <a
                      href="#"
                      class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
                      >Separated Link</a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <div
          x-data="{isShow:true}"
          :class="!isShow && 'opacity-0 transition-opacity duration-300'"
          class="alert flex flex-col items-center justify-between space-y-4 rounded-lg border border-slate-300 px-4 py-3 text-center text-slate-800 dark:border-navy-450 dark:text-navy-50 sm:flex-row sm:space-y-0 sm:px-5"
        >
          <p>Lorem ipsum dolor sit amet consectetur.</p>
          <button
            @click="isShow = false; setTimeout(()=>$root.remove(),300)"
            class="btn space-x-2 rounded-full bg-slate-150 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"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
                d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
              />
            </svg>
            <span>REMIND ME LATER</span>
          </button>
        </div>
      </div>