Slider

Pages

Users

Kate Winslet

katewinslet@left4code.com

John Travolta

johntravolta@left4code.com

Russell Crowe

russellcrowe@left4code.com

Leonardo DiCaprio

leonardodicaprio@left4code.com

Products

Sony Master Series A9G

Electronic

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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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-gray-200 dark:bg-dark-1 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 Tailwind HTML Admin Template" src="dist/images/preview-7.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 Tailwind HTML Admin Template" src="dist/images/preview-10.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 Tailwind HTML Admin Template" src="dist/images/preview-12.jpg" /HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Dark Mode