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

## Input File

- Forms
- Input File

## Input File

Code

Input elements with type `"file"` let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission.

Choose File Choose File

      <label
        class="btn 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"
      >
        <input
          tabindex="-1"
          type="file"
          class="pointer-events-none absolute inset-0 h-full w-full opacity-0"
        />
        <div class="flex items-center space-x-2">
          <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
            />
          </svg>
          <span>Choose File</span>
        </div>
      </label>
      <label
        class="btn relative bg-primary font-medium 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"
      >
        <input
          tabindex="-1"
          type="file"
          class="pointer-events-none absolute inset-0 h-full w-full opacity-0"
        />
        <div class="flex items-center space-x-2">
          <i class="fa-solid fa-cloud-arrow-up text-base"></i>
          <span>Choose File</span>
        </div>
      </label>
      <label
        class="btn border border-slate-300 font-medium text-slate-600 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-100 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90"
      >
        <input
          tabindex="-1"
          type="file"
          class="pointer-events-none absolute inset-0 h-full w-full opacity-0"
        />
        <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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
          />
        </svg>
      </label>
      <label
        class="btn size-9 rounded-full bg-info p-0 font-medium text-white hover:bg-info-focus hover:shadow-lg hover:shadow-info/50 focus:bg-info-focus active:bg-info-focus/90"
      >
        <input
          tabindex="-1"
          type="file"
          class="pointer-events-none absolute inset-0 h-full w-full opacity-0"
        />
        <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
          />
        </svg>
      </label>

## Basic Filepond

Code

Filepond a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience. You can check the plugin documentation on Github.

      <div class="filepond fp-bordered">
        <input type="file"  x-init="$el._x_filepond = FilePond.create($el)" multiple />
      </div>

## Filled Filepond

Code

Filepond a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience. You can check the plugin documentation on Github.

      <div class="filepond fp-bg-filled">
        <input type="file"  x-init="$el._x_filepond = FilePond.create($el)" multiple />
      </div>

## Filled & Bordered

Code

Filepond a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience. You can check the plugin documentation on Github.

      <div class="filepond fp-bordered fp-bg-filled">
        <input type="file"  x-init="$el._x_filepond = FilePond.create($el)" multiple />
      </div>

## Two Grid

Code

Filepond a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience. You can check the plugin documentation on Github.

      <div class="filepond fp-grid fp-bordered [--fp-grid:2]">
        <input type="file"  x-init="$el._x_filepond = FilePond.create($el)" multiple />
      </div>

## Three Grid

Code

Filepond a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience. You can check the plugin documentation on Github.

      <div class="filepond fp-grid fp-bordered [--fp-grid:3]">
        <input type="file"  x-init="$el._x_filepond = FilePond.create($el)" multiple />
      </div>

## Four Grid

Code

Filepond a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience. You can check the plugin documentation on Github.

      <div class="filepond fp-grid fp-bordered [--fp-grid:4]">
        <input type="file"  x-init="$el._x_filepond = FilePond.create($el)" multiple />
      </div>

## Circle Filepond

Code

Filepond a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience. You can check the plugin documentation on Github.

      <div class="filepond fp-bordered label-icon w-28">
        <input
          type="file"
          x-init="$el._x_filepond = FilePond.create($el,{
                stylePanelAspectRatio: '1:1',
                stylePanelLayout: 'compact circle',
                labelIdle: `<svg xmlns='http://www.w3.org/2000/svg' class='size-8' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
                  <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12'/>
                </svg>`
              })"
          accept="image/png, image/jpeg, image/gif"
        />
      </div>
      <div class="filepond fp-bordered label-icon w-24">
        <input
          type="file"
          x-init="$el._x_filepond = FilePond.create($el,{
                stylePanelAspectRatio: '1:1',
                stylePanelLayout: 'compact circle',
                labelIdle: `<svg xmlns='http://www.w3.org/2000/svg' class='size-8' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
                  <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12'/>
                </svg>`
              })"
          accept="image/png, image/jpeg, image/gif"
        />
      </div>
      <div class="filepond fp-bg-filled label-icon w-20">
        <input
          type="file"
          x-init="$el._x_filepond = FilePond.create($el,{
                stylePanelAspectRatio: '1:1',
                stylePanelLayout: 'compact circle',
                labelIdle: `<svg xmlns='http://www.w3.org/2000/svg' class='size-8' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
                  <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12'/>
                </svg>`
              })"
          accept="image/png, image/jpeg, image/gif"
        />
      </div>