Mountain
Lassen Peak
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
Components
- Tailwind CSS Accordion
- Tailwind CSS Alert
- Tailwind CSS Avatar
- Dropdown example
- Dropdown hover
- Delay duration
- Dropdown divider
- carousels
- date Picker
- lists
- lists Group
- Legend indicator
- Progress
- Skelton
- Tailwind Css Ratings
- Tailwind css Spinners
- Tailwind Css Icons staick
- Tailwind Css Stipper
- Tailwind Css Toats
- Dropdown with checkbox
- Background hover
- Tailwind css Timeline
- Helper text
- navBar
- Section
- Tabs
carousels
The Carousel Component provides a smooth and interactive way to cycle through content, whether it be images or text, mimicking the captivating motion of a traditional carousel.
carousels
Copied!
<div
x-data="{ activeSlide: 1, slideCount: 5 }"
class="overflow-hidden relative w-full md:w-1/2 h-[350px] mx-10 md:mx-80 rounded-xl"
x-init="setInterval(() => { activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1 }, 10000)">
<!-- Slider -->
<div class="bg-gray-300 h-[350px] whitespace-nowrap transition-transform duration-500 ease-in-out"
:style="'transform:translateX(-' + (activeSlide - 1) * 100.5 + '%)'">
<!-- Item 1 -->
<div class="inline-block w-full ">
<div class="bg-gray-300 h-[350px] flex justify-center items-center">
<img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="">
</div>
</div>
<!-- Item 2 -->
<div class="inline-block w-full">
<div class="bg-black bg-gray-300 h-[350px] flex justify-center items-center">
<img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="">
</div>
</div>
<!-- Item 3 -->
<div class="inline-block w-full">
<div class="bg-black bg-gray-300 h-[350px] flex justify-center items-center">
<img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="">
</div>
</div>
<!-- Item 4 -->
<div class="inline-block w-full">
<div class="bg-black bg-gray-300 h-[350px] flex justify-center items-center">
<img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="">
</div>
</div>
<!-- Item 5 -->
<div class="inline-block w-full">
<div class="bg-black bg-gray-300 h-[350px] flex justify-center items-center">
<img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="">
</div>
</div>
</div>
<button type="button" class="hs-carousel-prev hs-carousel:disabled:opacity-50 disabled:pointer-events-none absolute inset-y-0 start-0 inline-flex justify-center items-center w-[46px] h-full text-gray-800 hover:bg-gray-800/[.1]" @click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount">
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
<span class="hidden">Previous</span>
</span>
</button>
<button type="button" class="hs-carousel-next hs-carousel:disabled:opacity-50 disabled:pointer-events-none absolute inset-y-0 end-0 inline-flex justify-center items-center w-[46px] h-full text-gray-800 hover:bg-gray-800/[.1]" @click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" >
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
<span class="hidden">Next</span>
</button>
<!-- Dots Navigation -->
<div class="absolute bottom-0 left-0 right-0 flex justify-center space-x-2 p-4">
<template x-for="slideIndex in slideCount" :key="slideIndex">
<button
@click="activeSlide = slideIndex"
class="h-2 w-2 rounded-full"
:class="{'bg-orange-500': activeSlide === slideIndex, 'bg-white/50': activeSlide !== slideIndex}">
</button>
</template>
</div>
</div>
carousel2
Copied!
<div class="relative" x-data="{ activeSlide: 0, slideCount: 3 }" x-init="setInterval(() => { activeSlide = activeSlide < slideCount - 1 ? activeSlide + 1 : 0 }, 10000)">
<div class="hs-carousel relative overflow-hidden w-full min-h-[350px] bg-white rounded-lg">
<div class="w-full hs-carousel-body absolute top-0 bottom-0 start-0 ">
<div class="hs-carousel-slide absolute inline-block w-full h-full bg-gray-200 ">
<div x-show="activeSlide === 0" class="flex justify-center h-full bg-gray-200 p-6" x-transition:enter="transition-transform duration-700 ease-in-out" x-transition:enter-start="opacity-80 transform -translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0">
<span class="self-center text-4xl">First slide</span>
</div>
</div>
<div class="hs-carousel-slide absolute inline-block w-full h-full">
<div x-show="activeSlide === 1" class="flex justify-center h-full bg-gray-300 p-6" x-transition:enter="transition-transform duration-700 ease-in-out" x-transition:enter-start="opacity-80 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0">
<span class="self-center text-4xl">Second slide</span>
</div>
</div>
<div class="hs-carousel-slide absolute inline-block w-full h-full">
<div x-show="activeSlide === 2" class="flex justify-center h-full bg-gray-400 p-6" x-transition:enter="transition-transform duration-700 ease-in-out" x-transition:enter-start="opacity-80 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0">
<span class="self-center text-4xl">Third slide</span>
</div>
</div>
</div>
</div>
<button type="button" class="hs-carousel-prev hs-carousel:disabled:opacity-50 disabled:pointer-events-none absolute inset-y-0 start-0 inline-flex justify-center items-center w-[46px] h-full text-gray-800 hover:bg-gray-800/[.1]" @click="activeSlide = activeSlide > 0 ? activeSlide - 1 : slideCount - 1">
<span class="text-2xl" aria-hidden="true">
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
</svg>
</span>
<span class="sr-only">Previous</span>
</button>
<button type="button" class="hs-carousel-next hs-carousel:disabled:opacity-50 disabled:pointer-events-none absolute inset-y-0 end-0 inline-flex justify-center items-center w-[46px] h-full text-gray-800 hover:bg-gray-800/[.1]" @click="activeSlide = activeSlide < slideCount - 1 ? activeSlide + 1 : 0">
<span class="sr-only">Next</span>
<span class="text-2xl" aria-hidden="true">
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
</span>
</button>
</div>
carousel3
Copied!
First slide
Second slide
Third slide
<div
x-data="{ activeSlide: 1, slideCount: 3 }"
class="overflow-hidden relative"
x-init="setInterval(() => { activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1 }, 10000)">
<!-- Slider -->
<div class="bg-gray-300 h-[350px] whitespace-nowrap transition-transform duration-500 ease-in-out"
:style="'transform:translateX(-' + (activeSlide - 1) * 100.5 + '%)'">
<!--Item 1 -->
<div class="inline-block w-full ">
<div class="bg-gray-300 h-[350px] flex justify-center items-center">
<p class="text-white text-3xl font-bold ">First slide</p>
</div>
</div>
<!-- Item 2 -->
<div class="inline-block w-full ">
<div class="bg-gray-300 h-[350px] flex justify-center items-center">
<p class="text-white text-3xl font-bold ">Second slide</p>
</div>
</div>
<!-- Item 3-->
<div class="inline-block w-full">
<div class="bg-black bg-gray-300 h-[350px] flex justify-center items-center">
<p class="text-white text-3xl font-bold">Third slide</p>
</div>
</div>
</div>
<button type="button" class="hs-carousel-prev hs-carousel:disabled:opacity-50 disabled:pointer-events-none absolute inset-y-0 start-0 inline-flex justify-center items-center w-[46px] h-full text-gray-800 hover:bg-gray-800/[.1]" @click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount">
<span class="text-2xl" aria-hidden="true">
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
</svg>
</span>
<span class="sr-only">Previous</span>
</button>
<button type="button" class="hs-carousel-next hs-carousel:disabled:opacity-50 disabled:pointer-events-none absolute inset-y-0 end-0 inline-flex justify-center items-center w-[46px] h-full text-gray-800 hover:bg-gray-800/[.1]" @click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" >
<span class="sr-only">Next</span>
<span class="text-2xl" aria-hidden="true">
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
</span>
</button>
<!-- Dots Navigation -->
<div class="absolute bottom-0 left-0 right-0 flex justify-center space-x-2 p-4">
<template x-for="slideIndex in slideCount" :key="slideIndex">
<button
@click="activeSlide = slideIndex"
class="h-2 w-2 rounded-full"
:class="{'bg-orange-500': activeSlide === slideIndex, 'bg-white/50': activeSlide !== slideIndex}">
</button>
</template>
</div>
</div>
carousel4
Copied!
First slide
Second slide
Third slide
<div
x-data="{ activeSlide: 1, slideCount: 3 }"
class="overflow-hidden relative"
x-init="setInterval(() => { activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1 }, 10000)">
<!-- Slider -->
<div class="bg-gray-300 h-[350px] whitespace-nowrap transition-transform duration-500 ease-in-out"
:style="'transform:translateX(-' + (activeSlide - 1) * 100.5 + '%)'">
<!--Item 1 -->
<div class="inline-block w-full ">
<div class="bg-gray-300 h-[350px] flex justify-center items-center">
<p class="text-white text-3xl font-bold ">First slide</p>
</div>
</div>
<!-- Item 2 -->
<div class="inline-block w-full ">
<div class="bg-gray-300 h-[350px] flex justify-center items-center">
<p class="text-white text-3xl font-bold ">Second slide</p>
</div>
</div>
<!-- Item 3-->
<div class="inline-block w-full">
<div class="bg-black bg-gray-300 h-[350px] flex justify-center items-center">
<p class="text-white text-3xl font-bold">Third slide</p>
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 flex justify-center space-x-2 p-4">
<template x-for="slideIndex in slideCount" :key="slideIndex">
<button
@click="activeSlide = slideIndex"
class="h-2 w-2 rounded-full"
:class="{'bg-orange-500': activeSlide === slideIndex, 'bg-white/50': activeSlide !== slideIndex}">
</button>
</template>
</div>
</div>
Animated accessible tabs
Copied!
Mountain
Mount Shasta
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
Mountain
Eureka Peak
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
<div x-data="{ activeTab: 1 }">
<!-- Buttons -->
<div class="flex justify-center">
<div
role="tablist"
class="max-[480px]:max-w-[180px] inline-flex flex-wrap justify-center bg-slate-200 rounded-[20px] p-1 mb-8 min-[480px]:mb-12"
@keydown.right.prevent.stop="$focus.wrap().next()"
@keydown.left.prevent.stop="$focus.wrap().prev()"
@keydown.home.prevent.stop="$focus.first()"
@keydown.end.prevent.stop="$focus.last()"
>
<!-- Button #1 -->
<button
id="tab-1"
class="flex-1 text-sm font-medium h-8 px-4 rounded-2xl whitespace-nowrap focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150 ease-in-out"
:class="activeTab === 1 ? 'bg-white text-slate-900' : 'text-slate-600 hover:text-slate-900'"
:tabindex="activeTab === 1 ? 0 : -1"
:aria-selected="activeTab === 1"
aria-controls="tabpanel-1"
@click="activeTab = 1"
@focus="activeTab = 1"
>Lassen Peak</button>
<!-- Button #2 -->
<button
id="tab-2"
class="flex-1 text-sm font-medium h-8 px-4 rounded-2xl whitespace-nowrap focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150 ease-in-out"
:class="activeTab === 2 ? 'bg-white text-slate-900' : 'text-slate-600 hover:text-slate-900'"
:tabindex="activeTab === 2 ? 0 : -1"
:aria-selected="activeTab === 2"
aria-controls="tabpanel-2"
@click="activeTab = 2"
@focus="activeTab = 2"
>Mount Shasta</button>
<!-- Button #3 -->
<button
id="tab-3"
class="flex-1 text-sm font-medium h-8 px-4 rounded-2xl whitespace-nowrap focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150 ease-in-out"
:class="activeTab === 3 ? 'bg-white text-slate-900' : 'text-slate-600 hover:text-slate-900'"
:tabindex="activeTab === 3 ? 0 : -1"
:aria-selected="activeTab === 3"
aria-controls="tabpanel-3"
@click="activeTab = 3"
@focus="activeTab = 3"
>Eureka Peak</button>
</div>
</div>
<!-- Tab panels -->
<div class="max-w-[640px] mx-auto">
<div class="relative flex flex-col">
<!-- Panel #1 -->
<article
id="tabpanel-1"
class="w-full bg-white rounded-2xl shadow-xl min-[480px]:flex items-stretch focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300"
role="tabpanel"
tabindex="0"
aria-labelledby="tab-1"
x-show="activeTab === 1"
x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-700 transform order-first"
x-transition:enter-start="opacity-0 -translate-y-8"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-12"
>
<figure class="min-[480px]:w-1/2 p-2">
<img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" width="304" height="214" src="./tabs-image-01.jpg" alt="Tab 01" />
</figure>
<div class="min-[480px]:w-1/2 flex flex-col justify-center p-5 pl-3">
<div class="flex justify-between mb-1">
<header>
<div class="font-caveat text-xl font-medium text-sky-500">Mountain</div>
<h1 class="text-xl font-bold text-slate-900">Lassen Peak</h1>
</header>
<button class="shrink-0 h-[30px] w-[30px] border border-slate-200 hover:border-slate-300 rounded-full shadow inline-flex items-center justify-center focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150 ease-in-out" aria-label="Like">
<svg class="fill-red-500" xmlns="http://www.w3.org/2000/svg" width="14" height="13">
<path d="M6.985 1.635C5.361.132 2.797.162 1.21 1.7A3.948 3.948 0 0 0 0 4.541a3.948 3.948 0 0 0 1.218 2.836l5.156 4.88a.893.893 0 0 0 1.223 0l5.165-4.886a3.925 3.925 0 0 0 .061-5.663C11.231.126 8.62.094 6.985 1.635Zm4.548 4.53-4.548 4.303-4.54-4.294a2.267 2.267 0 0 1 0-3.275 2.44 2.44 0 0 1 3.376 0c.16.161.293.343.398.541a.915.915 0 0 0 .766.409c.311 0 .6-.154.767-.409.517-.93 1.62-1.401 2.677-1.142 1.057.259 1.797 1.181 1.796 2.238a2.253 2.253 0 0 1-.692 1.63Z" />
</svg>
</button>
</div>
<div class="text-slate-500 text-sm line-clamp-3 mb-2">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
<div class="text-right">
<a class="text-sm font-medium text-indigo-500 hover:text-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150 ease-out" href="#0">Read more -></a>
</div>
</div>
</article>
<!-- Panel #2 -->
<article
id="tabpanel-2"
class="w-full bg-white rounded-2xl shadow-xl min-[480px]:flex items-stretch focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300"
role="tabpanel"
tabindex="0"
aria-labelledby="tab-2"
x-show="activeTab === 2"
x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-700 transform order-first"
x-transition:enter-start="opacity-0 -translate-y-8"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-12"
>
<figure class="min-[480px]:w-1/2 p-2">
<img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" width="304" height="214" src="./tabs-image-02.jpg" alt="Tab 02" />
</figure>
<div class="min-[480px]:w-1/2 flex flex-col justify-center p-5 pl-3">
<div class="flex justify-between mb-1">
<header>
<div class="font-caveat text-xl font-medium text-sky-500">Mountain</div>
<h1 class="text-xl font-bold text-slate-900">Mount Shasta</h1>
</header>
<button class="shrink-0 h-[30px] w-[30px] border border-slate-200 hover:border-slate-300 rounded-full shadow inline-flex items-center justify-center focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150 ease-in-out" aria-label="Like">
<svg class="fill-red-500" xmlns="http://www.w3.org/2000/svg" width="14" height="13">
<path d="M6.985 1.635C5.361.132 2.797.162 1.21 1.7A3.948 3.948 0 0 0 0 4.541a3.948 3.948 0 0 0 1.218 2.836l5.156 4.88a.893.893 0 0 0 1.223 0l5.165-4.886a3.925 3.925 0 0 0 .061-5.663C11.231.126 8.62.094 6.985 1.635Zm4.548 4.53-4.548 4.303-4.54-4.294a2.267 2.267 0 0 1 0-3.275 2.44 2.44 0 0 1 3.376 0c.16.161.293.343.398.541a.915.915 0 0 0 .766.409c.311 0 .6-.154.767-.409.517-.93 1.62-1.401 2.677-1.142 1.057.259 1.797 1.181 1.796 2.238a2.253 2.253 0 0 1-.692 1.63Z" />
</svg>
</button>
</div>
<div class="text-slate-500 text-sm line-clamp-3 mb-2">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
<div class="text-right">
<a class="text-sm font-medium text-indigo-500 hover:text-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150 ease-out" href="#0">Read more -></a>
</div>
</div>
</article>
<!-- Panel #3 -->
<article
id="tabpanel-3"
class="w-full bg-white rounded-2xl shadow-xl min-[480px]:flex items-stretch focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300"
role="tabpanel"
tabindex="0"
aria-labelledby="tab-3"
x-show="activeTab === 3"
x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-700 transform order-first"
x-transition:enter-start="opacity-0 -translate-y-8"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-12"
>
<figure class="min-[480px]:w-1/2 p-2">
<img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" width="304" height="214" src="./tabs-image-03.jpg" alt="Tab 03" />
</figure>
<div class="min-[480px]:w-1/2 flex flex-col justify-center p-5 pl-3">
<div class="flex justify-between mb-1">
<header>
<div class="font-caveat text-xl font-medium text-sky-500">Mountain</div>
<h1 class="text-xl font-bold text-slate-900">Eureka Peak</h1>
</header>
<button class="shrink-0 h-[30px] w-[30px] border border-slate-200 hover:border-slate-300 rounded-full shadow inline-flex items-center justify-center focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150 ease-in-out" aria-label="Like">
<svg class="fill-red-500" xmlns="http://www.w3.org/2000/svg" width="14" height="13">
<path d="M6.985 1.635C5.361.132 2.797.162 1.21 1.7A3.948 3.948 0 0 0 0 4.541a3.948 3.948 0 0 0 1.218 2.836l5.156 4.88a.893.893 0 0 0 1.223 0l5.165-4.886a3.925 3.925 0 0 0 .061-5.663C11.231.126 8.62.094 6.985 1.635Zm4.548 4.53-4.548 4.303-4.54-4.294a2.267 2.267 0 0 1 0-3.275 2.44 2.44 0 0 1 3.376 0c.16.161.293.343.398.541a.915.915 0 0 0 .766.409c.311 0 .6-.154.767-.409.517-.93 1.62-1.401 2.677-1.142 1.057.259 1.797 1.181 1.796 2.238a2.253 2.253 0 0 1-.692 1.63Z" />
</svg>
</button>
</div>
<div class="text-slate-500 text-sm line-clamp-3 mb-2">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
<div class="text-right">
<a class="text-sm font-medium text-indigo-500 hover:text-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150 ease-out" href="#0">Read more -></a>
</div>
</div>
</article>
</div>
</div>
</div>
tinySlider Alpinejs integration
Copied!
Nom et prenom
directeur
-fes
lorem ipsum dolor
Nom et prenom
directeur
-fes
lorem ipsum dolor
Nom et prenom
directeur
-fes
lorem ipsum dolor
Nom et prenom
directeur
-fes
lorem ipsum dolor
Nom et prenom
directeur
-fes
lorem ipsum dolor
Nom et prenom
directeur
-fes
lorem ipsum dolor
Nom et prenom
directeur
-fes
lorem ipsum dolor
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
<!--[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.helper.ie8.js"></script><![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<!-- NOTE: prior to v2.2.1 tiny-slider.js need to be in <body> -->
<div class="p-8 bg-blue-600">
<div x-data="testimonialsSlider" class="relative">
<div class="relative" x-ref="container" x-cloak>
<a href="#" class="cursor-pointer flex flex-col justify-center w-full gap-4 px-4">
<img loading="lazy" src="https://images.unsplash.com/photo-1722648404131-a69c35a706fa?q=80&w=480" class="w-52 aspect-square rounded-lg object-cover" alt="photo de profile de NABIL ETBER">
<div class="w-full h-full space-y-3">
<div class="flex flex-col">
<h3 class="text-lg font-bold text-white">
Nom et prenom
</h3>
<p class="text-sm font-bold text-white">
directeur
</p>
<span class="text-sm font-bold text-white">-</span>
</div>
<p class="text-sm font-bold text-white">
fes
</p>
<div class="text-sm font-normal text-white">
lorem ipsum dolor
</div>
</div>
</a>
<a href="#" class="cursor-pointer flex flex-col justify-center w-full gap-4 px-4">
<img loading="lazy" src="https://images.unsplash.com/photo-1722648404131-a69c35a706fa?q=80&w=480" class="w-52 aspect-square rounded-lg object-cover" alt="photo de profile de NABIL ETBER">
<div class="w-full h-full space-y-3">
<div class="flex flex-col">
<h3 class="text-lg font-bold text-white">
Nom et prenom
</h3>
<p class="text-sm font-bold text-white">
directeur
</p>
<span class="text-sm font-bold text-white">-</span>
</div>
<p class="text-sm font-bold text-white">
fes
</p>
<div class="text-sm font-normal text-white">
lorem ipsum dolor
</div>
</div>
</a>
<a href="#" class="cursor-pointer flex flex-col justify-center w-full gap-4 px-4">
<img loading="lazy" src="https://images.unsplash.com/photo-1722648404131-a69c35a706fa?q=80&w=480" class="w-52 aspect-square rounded-lg object-cover" alt="photo de profile de NABIL ETBER">
<div class="w-full h-full space-y-3">
<div class="flex flex-col">
<h3 class="text-lg font-bold text-white">
Nom et prenom
</h3>
<p class="text-sm font-bold text-white">
directeur
</p>
<span class="text-sm font-bold text-white">-</span>
</div>
<p class="text-sm font-bold text-white">
fes
</p>
<div class="text-sm font-normal text-white">
lorem ipsum dolor
</div>
</div>
</a>
<a href="#" class="cursor-pointer flex flex-col justify-center w-full gap-4 px-4">
<img loading="lazy" src="https://images.unsplash.com/photo-1722648404131-a69c35a706fa?q=80&w=480" class="w-52 aspect-square rounded-lg object-cover" alt="photo de profile de NABIL ETBER">
<div class="w-full h-full space-y-3">
<div class="flex flex-col">
<h3 class="text-lg font-bold text-white">
Nom et prenom
</h3>
<p class="text-sm font-bold text-white">
directeur
</p>
<span class="text-sm font-bold text-white">-</span>
</div>
<p class="text-sm font-bold text-white">
fes
</p>
<div class="text-sm font-normal text-white">
lorem ipsum dolor
</div>
</div>
</a>
<a href="#" class="cursor-pointer flex flex-col justify-center w-full gap-4 px-4">
<img loading="lazy" src="https://images.unsplash.com/photo-1722648404131-a69c35a706fa?q=80&w=480" class="w-52 aspect-square rounded-lg object-cover" alt="photo de profile de NABIL ETBER">
<div class="w-full h-full space-y-3">
<div class="flex flex-col">
<h3 class="text-lg font-bold text-white">
Nom et prenom
</h3>
<p class="text-sm font-bold text-white">
directeur
</p>
<span class="text-sm font-bold text-white">-</span>
</div>
<p class="text-sm font-bold text-white">
fes
</p>
<div class="text-sm font-normal text-white">
lorem ipsum dolor
</div>
</div>
</a>
<a href="#" class="cursor-pointer flex flex-col justify-center w-full gap-4 px-4">
<img loading="lazy" src="https://images.unsplash.com/photo-1722648404131-a69c35a706fa?q=80&w=480" class="w-52 aspect-square rounded-lg object-cover" alt="photo de profile de NABIL ETBER">
<div class="w-full h-full space-y-3">
<div class="flex flex-col">
<h3 class="text-lg font-bold text-white">
Nom et prenom
</h3>
<p class="text-sm font-bold text-white">
directeur
</p>
<span class="text-sm font-bold text-white">-</span>
</div>
<p class="text-sm font-bold text-white">
fes
</p>
<div class="text-sm font-normal text-white">
lorem ipsum dolor
</div>
</div>
</a>
<a href="#" class="cursor-pointer flex flex-col justify-center w-full gap-4 px-4">
<img loading="lazy" src="https://images.unsplash.com/photo-1722648404131-a69c35a706fa?q=80&w=480" class="w-52 aspect-square rounded-lg object-cover" alt="photo de profile de NABIL ETBER">
<div class="w-full h-full space-y-3">
<div class="flex flex-col">
<h3 class="text-lg font-bold text-white">
Nom et prenom
</h3>
<p class="text-sm font-bold text-white">
directeur
</p>
<span class="text-sm font-bold text-white">-</span>
</div>
<p class="text-sm font-bold text-white">
fes
</p>
<div class="text-sm font-normal text-white">
lorem ipsum dolor
</div>
</div>
</a>
</div>
<!-- Prev/Next Arrows -->
<button x-on:click="slider.goTo('prev')"
x-show="showControls"
class="absolute left-0 top-1/2 -translate-y-1/2 text-xl border border-white font-semibold text-white bg-transparent rounded-full shadow-lg w-14 h-14 hover:bg-white hover:text-primary-dark">
<
</button>
<button x-on:click="slider.goTo('next')"
x-show="showControls"
class="absolute right-0 top-1/2 -translate-y-1/2 text-xl border border-white font-semibold text-white bg-transparent rounded-full shadow-lg w-14 h-14 hover:bg-white hover:text-primary-dark">
>
</button>
</div>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('testimonialsSlider', () => ({
showControls: true,
slider: null,
init(){
this.slider = tns({
container: this.$refs.container,
controls: false,
items: 1,
slideBy: 'page',
gutter:"10px",
responsive: {
768: {
items: 3,
edgePadding: 30
},
1024: {
items: 5,
}
},
});
},
}));
});
</script>