All Prompts
All Prompts
testimonialsectioncarouselreviewsanimatedresponsivetailwind
Scrolling Client Testimonials Carousel Section
Секция с отзывами клиентов: горизонтальная карусель с автопрокруткой, изображениями, рейтингами. Адаптивный дизайн, анимация при наведении.
Prompt
<section class="overflow-hidden bg-[#fafafa] pt-32 pb-40 relative" id="reviews">
<!-- Giant Background Text -->
<div class="absolute top-[10%] left-0 right-0 w-full text-center pointer-events-none select-none z-0">
<h2 class="text-[18vw] font-bold tracking-tighter text-neutral-100/80 leading-none reveal-on-scroll">
Client Stories
</h2>
</div>
<div
class="md:px-12 z-10 grid grid-cols-1 lg:grid-cols-12 gap-12 max-w-7xl mr-auto ml-auto pr-6 pl-6 relative gap-x-12 gap-y-12 items-end">
<!-- Left Controls/Info -->
<div class="lg:col-span-4 flex flex-col h-full justify-start">
<div class="mt-4 mb-8 reveal-on-scroll reveal-delay-100">
<span class="text-xs font-semibold text-orange-600 uppercase tracking-widest mb-4 block">
[ 20K HAPPY CLIENTS ]
</span>
<p class="text-neutral-500 text-sm leading-relaxed max-w-xs">
Our products are not only scientifically proven but also customer-approved. See what our community has to say
about their journey.
</p>
</div>
<!-- you can add arrows / dots here later if you want -->
</div>
<!-- Right Carousel -->
<div class="lg:col-span-8 relative overflow-hidden"
style="mask-image: linear-gradient(90deg, transparent, black 35%, black 55%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 35%, black 55%, transparent);">
<!-- Animated track -->
<div class="testimonial-track flex snap-x snap-mandatory pb-4 gap-x-6 gap-y-6 reveal-on-scroll reveal-delay-300">
<!-- Review Card 1 -->
<div
class="group testimonial-card min-w-[300px] md:min-w-[340px] bg-white p-4 border border-neutral-100 shadow-sm snap-center">
<div class="relative h-48 w-full mb-4 overflow-hidden bg-neutral-100">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/86f7f4a2-e44a-49da-9aa4-387df6392695_800w.webp" alt="Client Sarah" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:translate-x-3">
<div
class="absolute top-2 right-2 bg-white px-2 py-1 text-[10px] font-bold text-orange-600 uppercase tracking-wide">
[4.9]
</div>
</div>
<p class="text-xs text-neutral-600 leading-relaxed mb-6 h-20 overflow-hidden">
"I'm amazed at how quickly my skin improved after using these products! My complexion looks brighter, feels
smoother, and I've received so many compliments."
</p>
<div class="flex justify-between items-end border-t border-neutral-100 pt-4">
<span class="text-xs font-bold text-neutral-900">Sarah H.</span>
<span class="text-[10px] text-neutral-400 uppercase">May 2024</span>
</div>
</div>
<!-- Review Card 2 -->
<div
class="group testimonial-card min-w-[300px] md:min-w-[340px] snap-center bg-white border-neutral-100 border pt-4 pr-4 pb-4 pl-4 shadow-sm">
<div class="relative h-48 w-full mb-4 overflow-hidden bg-neutral-100">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/419c3346-033b-4638-a935-a2d88a49889c_800w.jpg" alt="Client Jane" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:-translate-x-3">
<div
class="absolute top-2 right-2 bg-white px-2 py-1 text-[10px] font-bold text-orange-600 uppercase tracking-wide">
[5.0]
</div>
</div>
<p class="text-xs text-neutral-600 leading-relaxed mb-6 h-20 overflow-hidden">
"I've struggled with dry, sensitive skin for years, but since switching to these products, my skin feels
hydrated, calm, and more balanced than ever."
</p>
<div class="flex justify-between items-end border-t border-neutral-100 pt-4">
<span class="text-xs font-bold text-neutral-900">Jane D.</span>
<span class="text-[10px] text-neutral-400 uppercase">May 2024</span>
</div>
</div>
<!-- Review Card 3 -->
<div
class="group testimonial-card min-w-[300px] md:min-w-[340px] bg-white p-4 border border-neutral-100 shadow-sm snap-center">
<div class="relative h-48 w-full mb-4 overflow-hidden bg-neutral-100">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/68d6b8da-d1ca-48b1-a6ff-a76d865061f1_800w.jpg" alt="Client Michael" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:translate-x-3">
<div
class="absolute top-2 right-2 bg-white px-2 py-1 text-[10px] font-bold text-orange-600 uppercase tracking-wide">
[4.8]
</div>
</div>
<p class="text-xs text-neutral-600 leading-relaxed mb-6 h-20 overflow-hidden">
"The texture of the serum is incredible. It absorbs instantly without leaving any residue. My routine has
never been this effective."
</p>
<div class="flex justify-between items-end border-t border-neutral-100 pt-4">
<span class="text-xs font-bold text-neutral-900">Michael R.</span>
<span class="text-[10px] text-neutral-400 uppercase">Apr 2024</span>
</div>
</div>
<!-- Review Card 4 -->
<div
class="group testimonial-card min-w-[300px] md:min-w-[340px] bg-white p-4 border border-neutral-100 shadow-sm snap-center">
<div class="relative h-48 w-full mb-4 overflow-hidden bg-neutral-100">
<img src="https://images.pexels.com/photos/3735654/pexels-photo-3735654.jpeg" alt="Client Lina" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:-translate-x-3">
<div
class="absolute top-2 right-2 bg-white px-2 py-1 text-[10px] font-bold text-orange-600 uppercase tracking-wide">
[4.7]
</div>
</div>
<p class="text-xs text-neutral-600 leading-relaxed mb-6 h-20 overflow-hidden">
"I love how lightweight everything feels. My routine finally looks minimal but my results feel maximal."
</p>
<div class="flex justify-between items-end border-t border-neutral-100 pt-4">
<span class="text-xs font-bold text-neutral-900">Lina R.</span>
<span class="text-[10px] text-neutral-400 uppercase">Mar 2024</span>
</div>
</div>
<!-- Review Card 5 -->
<div
class="group testimonial-card min-w-[300px] md:min-w-[340px] bg-white p-4 border border-neutral-100 shadow-sm snap-center">
<div class="relative h-48 w-full mb-4 overflow-hidden bg-neutral-100">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4a3559c6-d7dc-463f-9b25-ce7529387e3d_800w.webp" alt="Client Noah" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:translate-x-3">
<div
class="absolute top-2 right-2 bg-white px-2 py-1 text-[10px] font-bold text-orange-600 uppercase tracking-wide">
[5.0]
</div>
</div>
<p class="text-xs text-neutral-600 leading-relaxed mb-6 h-20 overflow-hidden">
"From the very first week I noticed a glow I hadn’t seen in years. It genuinely feels like my skin has been
reset."
</p>
<div class="flex justify-between items-end border-t border-neutral-100 pt-4">
<span class="text-xs font-bold text-neutral-900">Noah S.</span>
<span class="text-[10px] text-neutral-400 uppercase">Jan 2024</span>
</div>
</div>
<!-- DUPLICATE SET FOR INFINITE LOOP -->
<!-- Just re-use the same 5 cards to make the scroll seamless -->
<!-- You can keep or remove this if you prefer a single pass instead of a loop -->
<!-- Duplicate 1 -->
<div
class="group testimonial-card min-w-[300px] md:min-w-[340px] bg-white p-4 border border-neutral-100 shadow-sm snap-center">
<div class="relative h-48 w-full mb-4 overflow-hidden bg-neutral-100">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/86f7f4a2-e44a-49da-9aa4-387df6392695_800w.webp" alt="Client Sarah" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:translate-x-3">
<div
class="absolute top-2 right-2 bg-white px-2 py-1 text-[10px] font-bold text-orange-600 uppercase tracking-wide">
[4.9]
</div>
</div>
<p class="text-xs text-neutral-600 leading-relaxed mb-6 h-20 overflow-hidden">
"I'm amazed at how quickly my skin improved after using these products! My complexion looks brighter, feels
smoother, and I've received so many compliments."
</p>
<div class="flex justify-between items-end border-t border-neutral-100 pt-4">
<span class="text-xs font-bold text-neutral-900">Sarah H.</span>
<span class="text-[10px] text-neutral-400 uppercase">May 2024</span>
</div>
</div>
<!-- Duplicate 2 -->
<div
class="group testimonial-card min-w-[300px] md:min-w-[340px] snap-center bg-white border-neutral-100 border pt-4 pr-4 pb-4 pl-4 shadow-sm">
<div class="relative h-48 w-full mb-4 overflow-hidden bg-neutral-100">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/419c3346-033b-4638-a935-a2d88a49889c_800w.jpg" alt="Client Jane" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:-translate-x-3">
<div
class="absolute top-2 right-2 bg-white px-2 py-1 text-[10px] font-bold text-orange-600 uppercase tracking-wide">
[5.0]
</div>
</div>
<p class="text-xs text-neutral-600 leading-relaxed mb-6 h-20 overflow-hidden">
"I've struggled with dry, sensitive skin for years, but since switching to these products, my skin feels
hydrated, calm, and more balanced than ever."
</p>
<div class="flex justify-between items-end border-t border-neutral-100 pt-4">
<span class="text-xs font-bold text-neutral-900">Jane D.</span>
<span class="text-[10px] text-neutral-400 uppercase">May 2024</span>
</div>
</div>
<!-- Duplicate 3 -->
<div
class="group testimonial-card min-w-[300px] md:min-w-[340px] bg-white p-4 border border-neutral-100 shadow-sm snap-center">
<div class="relative h-48 w-full mb-4 overflow-hidden bg-neutral-100">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/68d6b8da-d1ca-48b1-a6ff-a76d865061f1_800w.jpg" alt="Client Michael" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:translate-x-3">
<div
class="absolute top-2 right-2 bg-white px-2 py-1 text-[10px] font-bold text-orange-600 uppercase tracking-wide">
[4.8]
</div>
</div>
<p class="text-xs text-neutral-600 leading-relaxed mb-6 h-20 overflow-hidden">
"The texture of the serum is incredible. It absorbs instantly without leaving any residue. My routine has
never been this effective."
</p>
<div class="flex justify-between items-end border-t border-neutral-100 pt-4">
<span class="text-xs font-bold text-neutral-900">Michael R.</span>
<span class="text-[10px] text-neutral-400 uppercase">Apr 2024</span>
</div>
</div>
<!-- Duplicate 4 -->
<div
class="group testimonial-card min-w-[300px] md:min-w-[340px] bg-white p-4 border border-neutral-100 shadow-sm snap-center">
<div class="relative h-48 w-full mb-4 overflow-hidden bg-neutral-100">
<img src="https://images.pexels.com/photos/3735654/pexels-photo-3735654.jpeg" alt="Client Lina" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:-translate-x-3">
<div
class="absolute top-2 right-2 bg-white px-2 py-1 text-[10px] font-bold text-orange-600 uppercase tracking-wide">
[4.7]
</div>
</div>
<p class="text-xs text-neutral-600 leading-relaxed mb-6 h-20 overflow-hidden">
"I love how lightweight everything feels. My routine finally looks minimal but my results feel maximal."
</p>
<div class="flex justify-between items-end border-t border-neutral-100 pt-4">
<span class="text-xs font-bold text-neutral-900">Lina R.</span>
<span class="text-[10px] text-neutral-400 uppercase">Mar 2024</span>
</div>
</div>
<!-- Duplicate 5 -->
<div
class="group testimonial-card min-w-[300px] md:min-w-[340px] bg-white p-4 border border-neutral-100 shadow-sm snap-center">
<div class="relative h-48 w-full mb-4 overflow-hidden bg-neutral-100">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" alt="Client Noah" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:translate-x-3">
<div
class="absolute top-2 right-2 bg-white px-2 py-1 text-[10px] font-bold text-orange-600 uppercase tracking-wide">
[5.0]
</div>
</div>
<p class="text-xs text-neutral-600 leading-relaxed mb-6 h-20 overflow-hidden">
"From the very first week I noticed a glow I hadn’t seen in years. It genuinely feels like my skin has been
reset."
</p>
<div class="flex justify-between items-end border-t border-neutral-100 pt-4">
<span class="text-xs font-bold text-neutral-900">Noah S.</span>
<span class="text-[10px] text-neutral-400 uppercase">Jan 2024</span>
</div>
</div>
</div>
</div>
</div>
<style>
.testimonial-track {
width: min-content;
animation: testimonial-scroll 35s linear infinite;
}
/* Pause on hover so users can read comfortably */
.testimonial-track:hover {
animation-play-state: paused;
}
@keyframes testimonial-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
</style>
</section>