Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Johnny Depp
johnnydepp@left4code.com
Robert De Niro
robertdeniro@left4code.com
Tom Hanks
tomhanks@left4code.com
Denzel Washington
denzelwashington@left4code.com
Products
Samsung Q90 QLED TV
Electronic
Nikon Z6
Photography
Oppo Find X2 Pro
Smartphone & Tablet
Sony A7 III
Photography

## Slider

## Single Item

Show example code

### 1

### 2

### 3

### 4

### 5

### 6

      HTMLOpenTagdiv class="mx-6"HTMLCloseTag HTMLOpenTagdiv class="single-item"HTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag1HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag2HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag3HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag4HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag5HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag6HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

## Multiple Item

Show example code

### 1

### 2

### 3

### 4

### 5

### 6

### 7

### 8

### 9

      HTMLOpenTagdiv class="mx-6"HTMLCloseTag HTMLOpenTagdiv class="multiple-items"HTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag1HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag2HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag3HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag4HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag5HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag6HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag7HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag8HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag9HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

## Responsive Display

Show example code

### 1

### 2

### 3

### 4

### 5

### 6

### 7

### 8

      HTMLOpenTagdiv class="mx-6 pb-8"HTMLCloseTag HTMLOpenTagdiv class="responsive-mode"HTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag1HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag2HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag3HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag4HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag5HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag6HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag7HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag8HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

## Center Mode

Show example code

### 1

### 2

### 3

### 4

### 5

### 6

      HTMLOpenTagdiv class="mx-6"HTMLCloseTag HTMLOpenTagdiv class="center-mode"HTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag1HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag2HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag3HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag4HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag5HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full bg-slate-100 dark:bg-darkmode-400 rounded-md"HTMLCloseTag HTMLOpenTagh3 class="h-full font-medium flex items-center justify-center text-2xl"HTMLCloseTag6HTMLOpenTag/h3HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

## Fade Animation

Show example code

      HTMLOpenTagdiv class="mx-6 pb-8"HTMLCloseTag HTMLOpenTagdiv class="fade-mode"HTMLCloseTag HTMLOpenTagdiv class="h-64 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-md overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Midone - HTML Admin Template" src="dist/images/preview-2.jpg" /HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-64 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-md overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Midone - HTML Admin Template" src="dist/images/preview-5.jpg" /HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-64 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-md overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Midone - HTML Admin Template" src="dist/images/preview-7.jpg" /HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Dark Mode