All Prompts
All Prompts
testimonialscarouselmarqueetailwindresponsivescroll animationlanding pagetestimonial
Scrolling Testimonials Marquee Section
Адаптивный блок с отзывами клиентов (marquee). Горизонтальная прокрутка цитат, имен и аватаров. Идеально для лендингов, портфолио, SaaS.
Prompt
<section id="testimonials"
class="sm:py-24 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll pt-16 pb-16 px-8"
data-element-locator="html > body:nth-of-type(1) > div:nth-of-type(1) > section:nth-of-type(4)">
<div class="flex items-center justify-between mb-8">
<div class="space-y-1">
<p class="text-xs uppercase text-neutral-500 tracking-widest font-geist">
What clients say
</p>
<h2 class="text-3xl sm:text-4xl font-geist tracking-tighter font-medium" style="">
Testimonials
</h2>
</div>
<div class="hidden sm:flex items-center gap-2 text-neutral-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<path
d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"
class=""></path>
<path
d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"
class=""></path>
</svg>
<span class="text-sm font-geist">Real feedback from clients</span>
</div>
</div>
<div class="relative overflow-hidden rounded-2xl sm:rounded-3xl border border-neutral-200 bg-white">
<div
class="pointer-events-none absolute inset-y-0 left-0 w-24 sm:w-40 bg-gradient-to-r from-white to-transparent z-10">
</div>
<div
class="pointer-events-none absolute inset-y-0 right-0 w-24 sm:w-40 bg-gradient-to-l from-white to-transparent z-10">
</div>
<div class="relative py-6 sm:py-8">
<div class="flex gap-4 sm:gap-5 will-change-transform animate-[marquee-ltr_45s_linear_infinite]">
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-neutral-200 bg-neutral-50 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c92852bb-a510-405a-85ab-ffa0fde136a4_320w.jpg" alt="Professional Portrait of Curly-Haired Businessman" class="size-9 object-cover rounded-full">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-neutral-900 font-geist">
Michael Chen
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-3.5 h-3.5 text-blue-500">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
</div>
<p class="text-xs text-neutral-500 font-geist">
CEO, TechStart
</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-neutral-700 font-geist">
Jin transformed our product completely. The new design
increased user engagement by 300% within the first month.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-neutral-200 bg-neutral-50 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4a77e6b3-efc2-47ae-a304-9e97bf3ebee3_320w.jpg" alt="Freckled young woman close-up portrait" class="size-9 object-cover rounded-full">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-neutral-900 font-geist">
Sarah Johnson
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-3.5 h-3.5 text-blue-500">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
</div>
<p class="text-xs text-neutral-500 font-geist">
Product Lead, DesignCo
</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-neutral-700 font-geist">
Incredible attention to detail and user needs. Jin's designs
are both beautiful and highly functional.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-neutral-200 bg-neutral-50 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a34e7279-3582-477a-8b2b-d9e9789eb63c_320w.jpg" alt="Stylish male studio portrait in dark suit" class="size-9 object-cover rounded-full">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-neutral-900 font-geist">
David Park
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-3.5 h-3.5 text-blue-500">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
</div>
<p class="text-xs text-neutral-500 font-geist">
Founder, AppWorks
</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-neutral-700 font-geist">
Working with Jin was seamless. Fast iterations, clear
communication, and outstanding results.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-neutral-200 bg-neutral-50 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7a1822f8-a919-4c21-8c72-c2b907f785f5_320w.jpg" alt="Studio portrait of woman in emerald blazer" class="size-9 object-cover rounded-full">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-neutral-900 font-geist">
Emma Wilson
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-3.5 h-3.5 text-blue-500">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
</div>
<p class="text-xs text-neutral-500 font-geist">
Director, CreativeLab
</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-neutral-700 font-geist">
Jin's design thinking elevated our brand. The design system
they created is still being used today.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-neutral-200 bg-neutral-50 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c92852bb-a510-405a-85ab-ffa0fde136a4_320w.jpg" alt="Professional Portrait of Curly-Haired Businessman" class="size-9 object-cover rounded-full">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-neutral-900 font-geist">
Michael Chen
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-3.5 h-3.5 text-blue-500">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
</div>
<p class="text-xs text-neutral-500 font-geist">
CEO, TechStart
</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-neutral-700 font-geist">
Jin transformed our product completely. The new design
increased user engagement by 300% within the first month.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-neutral-200 bg-neutral-50 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4a77e6b3-efc2-47ae-a304-9e97bf3ebee3_320w.jpg" alt="Freckled young woman close-up portrait" class="size-9 object-cover rounded-full">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-neutral-900 font-geist">
Sarah Johnson
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-3.5 h-3.5 text-blue-500">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
</div>
<p class="text-xs text-neutral-500 font-geist">
Product Lead, DesignCo
</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-neutral-700 font-geist">
Incredible attention to detail and user needs. Jin's designs
are both beautiful and highly functional.
</p>
</article>
</div>
</div>
<div class="border-t border-neutral-200"></div>
<div class="relative py-6 sm:py-8">
<div class="flex gap-4 sm:gap-5 will-change-transform animate-[marquee-rtl_45s_linear_infinite]">
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-neutral-200 bg-neutral-50 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8a90d32f-809f-4383-b71f-6a9c50621b69_320w.jpg" alt="Professional Portrait of Smiling Young Woman" class="size-9 object-cover rounded-full">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-neutral-900 font-geist">
Lisa Martinez
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-3.5 h-3.5 text-blue-500">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
</div>
<p class="text-xs text-neutral-500 font-geist">
VP Design, Innovate
</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-neutral-700 font-geist">
The design system Jin created streamlined our entire workflow.
Best investment we made this year.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-neutral-200 bg-neutral-50 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/48bfa4c0-f6a0-4932-b61a-337e47aa04e9_320w.jpg" alt="Professional smiling man portrait in suit" class="size-9 object-cover rounded-full">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-neutral-900 font-geist">
James Lee
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-3.5 h-3.5 text-blue-500">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
</div>
<p class="text-xs text-neutral-500 font-geist">
CTO, DataFlow
</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-neutral-700 font-geist">
Jin understands both design and development. The handoff was
perfect, saving us weeks of iterations.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-neutral-200 bg-neutral-50 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/77415a2e-dcbc-4748-a29d-fced4821881a_320w.jpg" alt="Studio portrait of woman with striking blue eyes" class="size-9 object-cover rounded-full">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-neutral-900 font-geist">
Rachel Kim
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-3.5 h-3.5 text-blue-500">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
</div>
<p class="text-xs text-neutral-500 font-geist">
Head of UX, CloudBase
</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-neutral-700 font-geist">
A true professional who delivers exceptional work every single
time. Highly recommended!
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-neutral-200 bg-neutral-50 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5a8f3649-9a97-4446-955e-d3ced353790f_320w.jpg" alt="Professional portrait of confident businessman" class="size-9 object-cover rounded-full">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-neutral-900 font-geist">
Tom Anderson
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-3.5 h-3.5 text-blue-500">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
</div>
<p class="text-xs text-neutral-500 font-geist">
COO, StartupHub
</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-neutral-700 font-geist">
Jin's work speaks for itself. Our conversion rate doubled
after the redesign launch.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-neutral-200 bg-neutral-50 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8a90d32f-809f-4383-b71f-6a9c50621b69_320w.jpg" alt="Professional Portrait of Smiling Young Woman" class="size-9 object-cover rounded-full">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-neutral-900 font-geist">
Lisa Martinez
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-3.5 h-3.5 text-blue-500">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
</div>
<p class="text-xs text-neutral-500 font-geist">
VP Design, Innovate
</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-neutral-700 font-geist">
The design system Jin created streamlined our entire workflow.
Best investment we made this year.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-neutral-200 bg-neutral-50 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/48bfa4c0-f6a0-4932-b61a-337e47aa04e9_320w.jpg" alt="Professional smiling man portrait in suit" class="size-9 object-cover rounded-full">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-neutral-900 font-geist">
James Lee
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="w-3.5 h-3.5 text-blue-500">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
</div>
<p class="text-xs text-neutral-500 font-geist">
CTO, DataFlow
</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-neutral-700 font-geist">
Jin understands both design and development. The handoff was
perfect, saving us weeks of iterations.
</p>
</article>
</div>
</div>
</div>
</section>