Sliders
A slider is a design element used to display images and videos on your website. It works like a slideshow, showing one image or video at a time. The content changes after a few seconds or when the visitor clicks to view the next one.
Variations
Controls Inside Requires GlideJS
Copy as:
<!-- Component: Slider with controls inside -->
<div class="relative w-full glide-01">
<!-- Slides -->
<div class="overflow-hidden" data-glide-el="track">
<ul class="relative w-full overflow-hidden p-0 whitespace-no-wrap flex flex-no-wrap [backface-visibility: hidden] [transform-style: preserve-3d] [touch-action: pan-Y] [will-change: transform]">
<li><img src="https://Tailwindmix.b-cdn.net/image-01.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-02.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-03.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-04.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-05.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
</ul>
</div>
<!-- Controls -->
<div class="absolute left-0 flex items-center justify-between w-full h-0 px-4 top-1/2 " data-glide-el="controls">
<button class="inline-flex items-center justify-center w-8 h-8 transition duration-300 border rounded-full lg:w-12 lg:h-12 text-slate-700 border-slate-700 hover:text-slate-900 hover:border-slate-900 focus-visible:outline-none bg-white/20" data-glide-dir="<" aria-label="prev slide">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<title>prev slide</title>
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
</svg>
</button>
<button class="inline-flex items-center justify-center w-8 h-8 transition duration-300 border rounded-full lg:w-12 lg:h-12 text-slate-700 border-slate-700 hover:text-slate-900 hover:border-slate-900 focus-visible:outline-none bg-white/20" data-glide-dir=">" aria-label="next slide">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<title>next slide</title>
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.0.2/glide.js"></script>
<script>
var glide01 = new Glide('.glide-01', {
type: 'slider',
focusAt: 'center',
perView: 1,
autoplay: 3000,
animationDuration: 700,
gap: 0,
classes: {
activeNav: '[&>*]:bg-slate-700',
},
});
glide01.mount();
</script>
<!-- End Slider with controls inside -->Controls Outside Requires GlideJS
Copy as:
<!-- Component: Slider with controls outside -->
<div class="relative w-full glide-04">
<!-- Slides -->
<div class="overflow-hidden" data-glide-el="track">
<ul class="relative w-full overflow-hidden p-0 whitespace-no-wrap flex flex-no-wrap [backface-visibility: hidden] [transform-style: preserve-3d] [touch-action: pan-Y] [will-change: transform]">
<li><img src="https://Tailwindmix.b-cdn.net/image-01.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-02.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-03.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-04.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-05.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
</ul>
</div>
<!-- Controls -->
<div class="flex items-center justify-center w-full gap-2 p-4" data-glide-el="controls">
<button class="inline-flex items-center justify-center w-8 h-8 transition duration-300 border rounded-full lg:w-12 lg:h-12 text-slate-700 border-slate-700 hover:text-slate-900 hover:border-slate-900 focus-visible:outline-none bg-white/20" data-glide-dir="<" aria-label="prev slide">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<title>prev slide</title>
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
</svg>
</button>
<button class="inline-flex items-center justify-center w-8 h-8 transition duration-300 border rounded-full lg:w-12 lg:h-12 text-slate-700 border-slate-700 hover:text-slate-900 hover:border-slate-900 focus-visible:outline-none bg-white/20" data-glide-dir=">" aria-label="next slide">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<title>next slide</title>
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.0.2/glide.js"></script>
<script>
var glide04 = new Glide('.glide-04', {
type: 'slider',
focusAt: 'center',
perView: 1,
autoplay: 3500,
animationDuration: 700,
gap: 0,
classes: {
activeNav: '[&>*]:bg-slate-700',
},
});
glide04.mount();
</script>
<!-- End Slider with controls outside -->Indicator Outside Requires GlideJS
Copy as:
<!-- Component: Slider with indicators outside -->
<div class="relative w-full glide-05">
<!-- Slides -->
<div class="overflow-hidden" data-glide-el="track">
<ul class="relative w-full overflow-hidden p-0 whitespace-no-wrap flex flex-no-wrap [backface-visibility: hidden] [transform-style: preserve-3d] [touch-action: pan-Y] [will-change: transform]">
<li><img src="https://Tailwindmix.b-cdn.net/image-03.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-04.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-05.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-01.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-02.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
</ul>
</div>
<!-- Indicators -->
<div class="flex items-center justify-center w-full gap-2" data-glide-el="controls[nav]">
<button class="p-4 group" data-glide-dir="=0" aria-label="goto slide 1"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=1" aria-label="goto slide 2"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=2" aria-label="goto slide 3"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=3" aria-label="goto slide 4"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.0.2/glide.js"></script>
<script>
var glide05 = new Glide('.glide-05', {
type: 'slider',
focusAt: 'center',
perView: 1,
autoplay: 3000,
animationDuration: 700,
gap: 0,
classes: {
activeNav: '[&>*]:bg-slate-700',
},
});
glide05.mount();
</script>
<!-- End Slider with indicators outside -->Indicator Inside Requires GlideJS
Copy as:
<!-- Component: Slider with indicators inside -->
<div class="relative w-full glide-02">
<!-- Slides -->
<div class="overflow-hidden" data-glide-el="track">
<ul class="relative w-full overflow-hidden p-0 whitespace-no-wrap flex flex-no-wrap [backface-visibility: hidden] [transform-style: preserve-3d] [touch-action: pan-Y] [will-change: transform]">
<li><img src="https://Tailwindmix.b-cdn.net/image-03.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-04.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-05.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-01.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-02.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
</ul>
</div>
<!-- Indicators -->
<div class="absolute bottom-0 flex items-center justify-center w-full gap-2" data-glide-el="controls[nav]">
<button class="p-4 group" data-glide-dir="=0" aria-label="goto slide 1"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=1" aria-label="goto slide 2"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=2" aria-label="goto slide 3"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=3" aria-label="goto slide 4"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.0.2/glide.js"></script>
<script>
var glide02 = new Glide('.glide-02', {
type: 'slider',
focusAt: 'center',
perView: 1,
autoplay: 3500,
animationDuration: 700,
gap: 0,
classes: {
activeNav: '[&>*]:bg-slate-700',
},
});
glide02.mount();
</script>
<!-- End Slider with indicators inside -->Indicator & Controls Inside Requires GlideJS
Copy as:
<!-- Component: Slider with indicators & controls inside -->
<div class="relative w-full glide-03">
<!-- Slides -->
<div class="overflow-hidden" data-glide-el="track">
<ul class="relative w-full overflow-hidden p-0 whitespace-no-wrap flex flex-no-wrap [backface-visibility: hidden] [transform-style: preserve-3d] [touch-action: pan-Y] [will-change: transform]">
<li><img src="https://Tailwindmix.b-cdn.net/image-05.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-01.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-02.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-03.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-04.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
</ul>
</div>
<!-- Controls -->
<div class="absolute left-0 flex items-center justify-between w-full h-0 px-4 top-1/2 " data-glide-el="controls">
<button class="inline-flex items-center justify-center w-8 h-8 transition duration-300 border rounded-full lg:w-12 lg:h-12 text-slate-700 border-slate-700 hover:text-slate-900 hover:border-slate-900 focus-visible:outline-none bg-white/20" data-glide-dir="<" aria-label="prev slide">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<title>prev slide</title>
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
</svg>
</button>
<button class="inline-flex items-center justify-center w-8 h-8 transition duration-300 border rounded-full lg:w-12 lg:h-12 text-slate-700 border-slate-700 hover:text-slate-900 hover:border-slate-900 focus-visible:outline-none bg-white/20" data-glide-dir=">" aria-label="next slide">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<title>next slide</title>
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</button>
</div>
<!-- Indicators -->
<div class="absolute bottom-0 flex items-center justify-center w-full gap-2" data-glide-el="controls[nav]">
<button class="p-4 group" data-glide-dir="=0" aria-label="goto slide 1"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=1" aria-label="goto slide 2"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=2" aria-label="goto slide 3"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=3" aria-label="goto slide 4"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.0.2/glide.js"></script>
<script>
var glide03 = new Glide('.glide-03', {
type: 'slider',
focusAt: 'center',
perView: 1,
autoplay: 3000,
animationDuration: 700,
gap: 0,
classes: {
activeNav: '[&>*]:bg-slate-700',
},
});
glide03.mount();
</script>
<!-- End Slider with indicators & controls inside -->Card Requires GlideJS
Copy as:
<!-- Component: Card Slider -->
<div class="relative w-full overflow-hidden bg-white rounded shadow-xl shadow-slate-200 glide-06">
<!-- Slides -->
<div class="overflow-hidden" data-glide-el="track">
<ul class="relative w-full overflow-hidden p-0 whitespace-no-wrap flex flex-no-wrap [backface-visibility: hidden] [transform-style: preserve-3d] [touch-action: pan-Y] [will-change: transform]">
<li><img src="https://Tailwindmix.b-cdn.net/image-05.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-01.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-02.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-03.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
<li><img src="https://Tailwindmix.b-cdn.net/image-04.jpg" class="w-full max-w-full max-h-full m-auto" /></li>
</ul>
</div>
<!-- Controls -->
<div class="absolute left-0 flex items-center justify-between w-full h-0 px-4 top-1/2 " data-glide-el="controls">
<button class="inline-flex items-center justify-center w-8 h-8 transition duration-300 border rounded-full lg:w-12 lg:h-12 text-slate-700 border-slate-700 hover:text-slate-900 hover:border-slate-900 focus-visible:outline-none bg-white/20" data-glide-dir="<" aria-label="prev slide">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<title>prev slide</title>
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
</svg>
</button>
<button class="inline-flex items-center justify-center w-8 h-8 transition duration-300 border rounded-full lg:w-12 lg:h-12 text-slate-700 border-slate-700 hover:text-slate-900 hover:border-slate-900 focus-visible:outline-none bg-white/20" data-glide-dir=">" aria-label="next slide">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<title>next slide</title>
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</button>
</div>
<!-- Indicators -->
<div class="absolute bottom-0 flex items-center justify-center w-full gap-2" data-glide-el="controls[nav]">
<button class="p-4 group" data-glide-dir="=0" aria-label="goto slide 1"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=1" aria-label="goto slide 2"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=2" aria-label="goto slide 3"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
<button class="p-4 group" data-glide-dir="=3" aria-label="goto slide 4"><span class="block w-2 h-2 transition-colors duration-300 rounded-full ring-1 ring-slate-700 bg-white/20 focus:outline-none"></span></button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.0.2/glide.js"></script>
<script>
var glide06 = new Glide('.glide-06', {
type: 'slider',
focusAt: 'center',
perView: 1,
autoplay: 3000,
animationDuration: 700,
gap: 0,
classes: {
activeNav: '[&>*]:bg-slate-700',
},
});
glide06.mount();
</script>
<!-- End Card Slider -->Testimonial Requires GlideJS
Copy as:
Wind-ui is probably one of the best libraries I've come across. Good looking, easy to use and above all super accessible. If you haven't tried it yet just do so!
Bill GatesCEO, MicrosoftWind-ui components come with proper attributes to ensure full accessibility with the WAI-ARIA standards. That's just awesome for a free ui library.
Jane SmithWAI-ARIA, RepresentativeYou can easily communicate with Wind-ui's team for support through their discord channel. They are responsive and ultra helpful guys!
Arnold JonesSoftware Engineer
<!-- Component: Testimonial slider -->
<div class="relative w-full glide-08">
<!-- Slides -->
<div class="overflow-hidden text-center bg-white rounded shadow-2xl shadow-slate-200 text-slate-500 " data-glide-el="track">
<ul class="relative w-full overflow-hidden p-0 whitespace-no-wrap flex flex-no-wrap [backface-visibility: hidden] [transform-style: preserve-3d] [touch-action: pan-Y] [will-change: transform]">
<li>
<div class="w-full">
<!-- Start Testimonial -->
<div class="overflow-hidden ">
<div class="relative p-6">
<figure class="relative z-10">
<blockquote class="p-6 text-lg leading-loose lg:text-xl">
<p>Wind-ui is probably one of the best libraries I've come across. Good looking, easy to use and above all super accessible. If you haven't tried it yet just do so!</p>
</blockquote>
<figcaption class="flex flex-col items-center gap-2 p-6 text-sm text-emerald-500">
<span class="flex gap-1 text-amber-400" role="img" aria-label="Rating: 3 out of 5 stars">
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
</svg>
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
</svg>
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
</svg></span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
</svg></span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
</svg>
</span>
</span>
<div class="flex items-center gap-4 pt-4 text-sm text-left text-emerald-500">
<img src="https://i.pravatar.cc/40?img=11" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full shrink-0" />
<div class="flex flex-col gap-1">
<span class="font-bold uppercase">Bill Gates</span>
<cite class="not-italic"><a href="#">CEO, Microsoft</a></cite>
</div>
</div>
</figcaption>
</figure>
<svg aria-hidden="true" class="absolute z-0 h-16 left-6 top-6" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.79187 3.83333C2.66179 3.83333 2.53696 3.85316 2.41271 3.87125C2.45296 3.73591 2.49437 3.59825 2.56087 3.47458C2.62737 3.29491 2.73121 3.13916 2.83446 2.98225C2.92079 2.8125 3.07304 2.69758 3.18504 2.55233C3.30229 2.41116 3.46212 2.31725 3.58871 2.2C3.71296 2.0775 3.87571 2.01625 4.00521 1.92991C4.14054 1.85233 4.25837 1.76658 4.38437 1.72575L4.69879 1.59625L4.97529 1.48133L4.69237 0.35083L4.34412 0.43483C4.23271 0.46283 4.09679 0.495496 3.94221 0.53458C3.78412 0.563746 3.61554 0.643663 3.42771 0.71658C3.24221 0.799413 3.02754 0.855413 2.82804 0.988413C2.62737 1.11558 2.39579 1.22175 2.19162 1.39208C1.99387 1.56766 1.75529 1.71991 1.57912 1.94333C1.38662 2.15216 1.19646 2.3715 1.04887 2.62116C0.877957 2.85916 0.761873 3.1205 0.639373 3.37891C0.52854 3.63733 0.43929 3.90158 0.366373 4.15825C0.228123 4.67275 0.16629 5.16158 0.142373 5.57983C0.12254 5.99866 0.134207 6.34691 0.158707 6.59891C0.167457 6.71791 0.18379 6.83341 0.195457 6.91333L0.21004 7.01133L0.225207 7.00783C0.328959 7.49248 0.567801 7.93786 0.914102 8.29243C1.2604 8.64701 1.70001 8.89631 2.18208 9.01148C2.66415 9.12665 3.16897 9.10299 3.63815 8.94323C4.10733 8.78348 4.52169 8.49416 4.83331 8.10874C5.14493 7.72333 5.34107 7.25757 5.39903 6.76534C5.457 6.27311 5.37443 5.77452 5.16087 5.32726C4.94731 4.88 4.61149 4.50233 4.19225 4.23796C3.77302 3.97358 3.28751 3.8333 2.79187 3.83333V3.83333ZM9.20854 3.83333C9.07846 3.83333 8.95362 3.85316 8.82937 3.87125C8.86962 3.73591 8.91104 3.59825 8.97754 3.47458C9.04404 3.29491 9.14787 3.13916 9.25112 2.98225C9.33746 2.8125 9.48971 2.69758 9.60171 2.55233C9.71896 2.41116 9.87879 2.31725 10.0054 2.2C10.1296 2.0775 10.2924 2.01625 10.4219 1.92991C10.5572 1.85233 10.675 1.76658 10.801 1.72575L11.1155 1.59625L11.392 1.48133L11.109 0.35083L10.7608 0.43483C10.6494 0.46283 10.5135 0.495496 10.3589 0.53458C10.2008 0.563746 10.0322 0.643663 9.84437 0.71658C9.65946 0.799997 9.44421 0.855413 9.24471 0.988997C9.04404 1.11616 8.81246 1.22233 8.60829 1.39266C8.41054 1.56825 8.17196 1.7205 7.99579 1.94333C7.80329 2.15216 7.61312 2.3715 7.46554 2.62116C7.29462 2.85916 7.17854 3.1205 7.05604 3.37891C6.94521 3.63733 6.85596 3.90158 6.78304 4.15825C6.64479 4.67275 6.58296 5.16158 6.55904 5.57983C6.53921 5.99866 6.55087 6.34691 6.57537 6.59891C6.58412 6.71791 6.60046 6.83341 6.61212 6.91333L6.62671 7.01133L6.64187 7.00783C6.74563 7.49248 6.98447 7.93786 7.33077 8.29243C7.67707 8.64701 8.11668 8.89631 8.59875 9.01148C9.08081 9.12665 9.58563 9.10299 10.0548 8.94323C10.524 8.78348 10.9384 8.49416 11.25 8.10874C11.5616 7.72333 11.7577 7.25757 11.8157 6.76534C11.8737 6.27311 11.7911 5.77452 11.5775 5.32726C11.364 4.88 11.0282 4.50233 10.6089 4.23796C10.1897 3.97358 9.70417 3.8333 9.20854 3.83333V3.83333Z" class="fill-emerald-50" />
</svg>
</div>
</div>
<!-- End Testimonial -->
</div>
</li>
<li>
<div class="w-full">
<!-- Start Testimonial -->
<div class="overflow-hidden">
<div class="relative p-6">
<figure class="relative z-10">
<blockquote class="p-6 text-lg leading-loose lg:text-xl">
<p>Wind-ui components come with proper attributes to ensure full accessibility with the WAI-ARIA standards. That's just awesome for a free ui library.</p>
</blockquote>
<figcaption class="flex flex-col items-center gap-2 p-6 text-sm text-emerald-500">
<span class="flex gap-1 text-amber-400" role="img" aria-label="Rating: 3 out of 5 stars">
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d