Testimonial Slider Section Using Tailwind UI
“The Testimonial Slider Section is a page component that showcases user reviews in an elegant slider format, crafted using Tailwind CSS.”
section
Loading component...
129 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300;1,400&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'IBM Plex Sans', sans-serif;
}
</style>
<!-- inspired design by https://linktr.ee/?ref=pixelfika -->
<section class="text-gray-600 body-font">
<div class="container px-5 py-12 mx-auto">
<div class="slider">
<div class="slide">
<img class="mx-auto lg:w-4/6"
src="https://linktr.ee/_gatsby/image/87b2d808b1cad9718a50030b99f42f24/15a186931b23468dd8dc151e0365c9e6/Testimonial-Riley-Lemon.avif?eu=065bd5fba1b70c7bbc19a5041848334c61540deb12aca620eacee2dfd0a908875e2c827ebf0a74ea62c7fabb2d6775c86709165e7cb0e94d5a074ad360f04ee56458674a96f30d2defe6ca5fabd74226b7a7dd993c0a7390af724f1c9b2861fad66c664fcc55cf5ff4829902379b0749a5bbb8f38b70fc42f78f0d1a565ba5c7297a99296daea2e5a97425855452ff398e89aed71522213f669588dac5&a=w%3D1280%26h%3D647%26fm%3Davif%26q%3D75&cd=54c8c3def75a1007008534b1bdb993fe"
alt="">
<div class="w-full mx-auto text-center lg:w-4/6">
<h3 class="leading-normal text-3xl md:text-5xl font-extrabold text-[#1E2230] mt-12">“Linktree simplifies the
process for creators to share multiple parts of themselves in one inclusive link.”</h3>
<h2 class="mt-4 font-medium tracking-wider text-gray-900 title-font">Riley Lemon,</h2>
<p class="text-gray-500">Youtube, Content Creator</p>
<div class="flex items-center justify-center mx-auto mt-6 space-x-2">
<button class="prev-button p-4 border rounded-xl border-[#1E2230] hover:bg-[#1E2230] group">
<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 stroke-current group-hover:stroke-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15m0 0l6.75 6.75M4.5 12l6.75-6.75" />
</svg>
</button>
<button class="next-button p-4 border rounded-xl border-[#1E2230] hover:bg-[#1E2230] group">
<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 stroke-current group-hover:stroke-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
</svg>
</button>
</div>
</div>
</div>
<div class="slide">
<img class="mx-auto lg:w-4/6"
src="https://linktr.ee/_gatsby/image/9aedb20cf465e4bab2c7d464423677c4/15a186931b23468dd8dc151e0365c9e6/Testimonial-Patti-Chimkire-New.avif?eu=020581a9f0b00e2ab61aa4521e4d334867030dbc12fdf472bbcae6dd86a95bd7557ed428b55e74eb6194febb7f3071c9635d120f2db0e81e0c071f8b31f34de169512b06d2b60332f3b28905b0d34f7ab6bac88f320a3297e8231342d0206cf58c217750cf51831db69dcd546edb5214e4a7ffbbd028a844bec84b5e141ab0d83034bd2530b8a7e7a1343c96571bd8339685b894772b253e63cf8a9ac7b6e2e6b1cba853ab35b23710f2c1031a62392094f6fb4c92342ea39d215d397218f28b425d42b75296443223bd170b5c46bfeb22e80419e7abedb5881f58dd&a=w%3D1280%26h%3D647%26fm%3Davif%26q%3D75&cd=1dd261b583774100bf6182337fad0d59"
alt="">
<div class="w-full mx-auto text-center lg:w-4/6">
<h3 class="leading-normal text-3xl md:text-5xl font-extrabold text-[#1E2230] mt-12">“Linktree helps my
customers get where they need to go. It’s so fast and easy.”</h3>
<h2 class="mt-4 font-medium tracking-wider text-gray-900 title-font">Patti Chimkire,</h2>
<p class="text-gray-500">Founder and Pastry Chef, Mali Bakes</p>
<div class="flex items-center justify-center mx-auto mt-6 space-x-2">
<button class="prev-button p-4 border rounded-xl border-[#1E2230] hover:bg-[#1E2230] group">
<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 stroke-current group-hover:stroke-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15m0 0l6.75 6.75M4.5 12l6.75-6.75" />
</svg>
</button>
<button class="next-button p-4 border rounded-xl border-[#1E2230] hover:bg-[#1E2230] group">
<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 stroke-current group-hover:stroke-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
</svg>
</button>
</div>
</div>
</div>
<div class="slide">
<img class="mx-auto lg:w-4/6"
src="https://linktr.ee/_gatsby/image/537602862cc1ba2a5ab85af4b58e6d1e/15a186931b23468dd8dc151e0365c9e6/Testimonial-Luke-Kidgell2.avif?eu=0705d4feffe6592bb84ff9011b483e4d60565de918fef270bccfb4d2d5a855d10f7d842cbd5626ea67c0acba2e6522cf6059155529edba1b59514ed360a546e53f03270d83b30f3bf2b38300e4d14d7ceae1d99f231d3cdcf47a501b9b2664fbda366413c654954bf0c6950377830b49bae0bfad827ab251f48d5c450a1def996b7ab83c72b5aaecb5357ed40a4d8260d4c3839f2a33253d67d591d5cefe81e4aa83e677ac25b03c08b1865d06633f&a=w%3D1280%26h%3D647%26fm%3Davif%26q%3D75&cd=974e60d6012ecf46c86974f355989cac"
alt="">
<div class="w-full mx-auto text-center lg:w-4/6">
<h3 class="leading-normal text-3xl md:text-5xl font-extrabold text-[#1E2230] mt-12">“I use Linktree’s
analytics to better understand my audience and what converts them.”</h3>
<h2 class="mt-4 font-medium tracking-wider text-gray-900 title-font">Luke Kidgell,</h2>
<p class="text-gray-500">Comedian</p>
<div class="flex items-center justify-center mx-auto mt-6 space-x-2">
<button class="prev-button p-4 border rounded-xl border-[#1E2230] hover:bg-[#1E2230] group">
<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 stroke-current group-hover:stroke-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15m0 0l6.75 6.75M4.5 12l6.75-6.75" />
</svg>
</button>
<button class="next-button p-4 border rounded-xl border-[#1E2230] hover:bg-[#1E2230] group">
<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 stroke-current group-hover:stroke-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
const slides = document.querySelectorAll('.slide');
const prevButtons = document.querySelectorAll('.prev-button');
const nextButtons = document.querySelectorAll('.next-button');
let currentSlide = 0;
function showSlide(slideIndex) {
slides.forEach((slide, index) => {
if (index === slideIndex) {
slide.style.display = 'block';
} else {
slide.style.display = 'none';
}
});
}
prevButtons.forEach((button) => {
button.addEventListener('click', () => {
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
showSlide(currentSlide);
});
});
nextButtons.forEach((button) => {
button.addEventListener('click', () => {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
});
});
showSlide(currentSlide);
</script>