All Prompts
All Prompts
testimonialscarouselmarqueetailwindanimatedresponsivedarklanding-pagetestimonial
Animated Marquee Testimonials Section
Анимированная секция отзывов с горизонтальным скроллом и градиентными рамками. Идеально для лендингов SaaS и продуктов.
Prompt
<section
class="[animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll sm:px-6 sm:py-10 md:py-12 lg:px-8 lg:mt-40 lg:mb-40 max-w-7xl mt-40 mr-auto mb-40 ml-auto pt-8 pr-4 pb-8 pl-4 relative"
data-element-locator="html > body:nth-of-type(1) > section:nth-of-type(6)">
<div class="flex items-center justify-between">
<div class="space-y-1">
<p class="text-xs sm:text-sm text-slate-400">What people say</p>
<h2 class="text-2xl sm:text-3xl md:text-4xl tracking-tight font-semibold text-slate-100">Testimonials</h2>
</div>
<div class="hidden sm:flex items-center gap-2 text-slate-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">Real feedback from teams</span>
</div>
</div>
<div class="sm:mt-8 overflow-hidden sm:rounded-3xl bg-slate-950 border-slate-800 border rounded-2xl mt-8 relative"
style="position: relative;">
<div class="absolute -inset-1 rounded-2xl sm:rounded-3xl pointer-events-none"
style="background: linear-gradient(45deg, rgba(132, 204, 22, 0.1), rgba(52, 211, 153, 0.08), rgba(34, 211, 238, 0.06), rgba(163, 230, 53, 0.08)); background-size: 300%; animation: glow-rotate 15s linear infinite; filter: blur(25px); opacity: 0.6; z-index: -1;">
</div>
<div class="absolute inset-0 rounded-2xl sm:rounded-3xl pointer-events-none" style="z-index: 1;">
<div
style="position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(90deg, rgba(132, 204, 22, 0.3), rgba(52, 211, 153, 0.25), rgba(34, 211, 238, 0.2), rgba(163, 230, 53, 0.25)); background-size: 400% 100%; animation: border-flow 8s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;">
</div>
</div>
<div
class="pointer-events-none absolute inset-y-0 left-0 w-24 sm:w-40 bg-gradient-to-r from-slate-950 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-slate-950 to-transparent z-10">
</div>
<div class="sm:py-8 pt-6 pb-6 relative">
<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-slate-800 bg-slate-900/40 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/92cff667-f259-4342-a0aa-f51b804f4d5c_800w.webp" alt="Avatar" class="size-9 object-cover rounded-full">
<div class="">
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-slate-100">Ava Thompson</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-400">
<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-slate-400">@ava_builds</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-slate-300">
Sendo took minutes to integrate and saved days of email management. The AI is incredible.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/68ef576f-b219-43a8-8f00-72b9eea83a0d_320w.webp" alt="Avatar" class="size-9 object-cover rounded-full">
<div class="">
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-slate-100">Noah Patel</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-400">
<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-slate-400">@noah_ops</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-slate-300">
We achieved inbox zero 3× faster. The smart features work perfectly out of the box.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c543a9e1-f226-4ced-80b0-feb8445a75b9_800w.jpg" alt="Avatar" class="size-9 object-cover rounded-full">
<div class="">
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-slate-100">Maya 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-400">
<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-slate-400">@mayak</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-slate-300">
The platform feels invisible—just fast, reliable email management and clean organization.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/16d38370-5873-45cf-bab1-60a7b923dc6e_800w.jpg" alt="Avatar" class="size-9 rounded-full object-cover">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-slate-100">Ethan Garcia</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-400">
<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-slate-400">@egarcia</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-slate-300">
Smart insights baked in. We finally trust our email workflow for decision-making.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b08603d1-aaf4-4216-bd31-010eaa92f5cd_800w.jpg" alt="Avatar" class="size-9 rounded-full object-cover">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-slate-100">Ava Thompson</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-400">
<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-slate-400">@ava_builds</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-slate-300">
Sendo took minutes to integrate and saved days of email management. The AI is incredible.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9224ba63-793b-4edd-80e4-b2512cde1f9c_800w.jpg" alt="Avatar" class="size-9 rounded-full object-cover">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-slate-100">Noah Patel</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-400">
<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-slate-400">@noah_ops</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-slate-300">
We achieved inbox zero 3× faster. The smart features work perfectly out of the box.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/009b1373-14ec-472b-af1a-2cd1e8f97116_800w.jpg" alt="Avatar" class="size-9 rounded-full object-cover">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-slate-100">Maya 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-400">
<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-slate-400">@mayak</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-slate-300">
The platform feels invisible—just fast, reliable email management and clean organization.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5180d964-2425-4134-8220-c1528af09124_800w.jpg" alt="Avatar" class="size-9 rounded-full object-cover">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-slate-100">Ethan Garcia</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-400">
<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-slate-400">@egarcia</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-slate-300">
Smart insights baked in. We finally trust our email workflow for decision-making.
</p>
</article>
</div>
</div>
<div class="border-t border-slate-800/80"></div>
<div class="sm:py-8 pt-6 pb-6 relative">
<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] bg-slate-900/40 border-slate-800 border rounded-2xl pt-5 pr-5 pb-5 pl-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4f30f4f2-b81c-4bf1-88c7-86b1dc41acd1_800w.jpg" alt="Avatar" class="size-9 object-cover rounded-full">
<div class="">
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-slate-100">Priya Singh</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-400">
<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-slate-400">@priya_dev</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-slate-300">
The automation suite transformed our workflow. The interface stays out of the way and just works.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] bg-slate-900/40 border-slate-800 border rounded-2xl pt-5 pr-5 pb-5 pl-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/46ceb0ec-b3fa-4f16-8a70-bbd217ee77a9_800w.jpg" alt="Avatar" class="size-9 object-cover rounded-full">
<div class="">
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-slate-100">Leo Martin</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-400">
<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-slate-400">@leom</p>
</div>
</div>
<p class="sm:text-base text-sm text-slate-300 mt-4">
Smart filters, priority routing, and analytics—without extra setup work. Huge productivity win.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] bg-slate-900/40 border-slate-800 border rounded-2xl pt-5 pr-5 pb-5 pl-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ecd0a237-cc16-45f4-aef8-82b1ad266250_320w.webp" alt="Avatar" class="size-9 object-cover rounded-full">
<div class="">
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-slate-100">Sofia Alvarez</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-400">
<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-slate-400">@sofialabs</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-slate-300">
From chaos to clarity with one setup. Best email experience we've had in years.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/16d38370-5873-45cf-bab1-60a7b923dc6e_800w.jpg" alt="Avatar" class="size-9 rounded-full object-cover">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-slate-100">Jackson 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-400">
<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-slate-400">@jacksonlee</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-slate-300">
Clean interface, helpful AI, and thoughtful automation. It's the small things that matter.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c543a9e1-f226-4ced-80b0-feb8445a75b9_800w.jpg" alt="Avatar" class="size-9 rounded-full object-cover">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-slate-100">Priya Singh</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-400">
<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-slate-400">@priya_dev</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-slate-300">
The automation suite transformed our workflow. The interface stays out of the way and just works.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9224ba63-793b-4edd-80e4-b2512cde1f9c_800w.jpg" alt="Avatar" class="size-9 rounded-full object-cover">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-slate-100">Leo Martin</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-400">
<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-slate-400">@leom</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-slate-300">
Smart filters, priority routing, and analytics—without extra setup work. Huge productivity win.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b08603d1-aaf4-4216-bd31-010eaa92f5cd_800w.jpg" alt="Avatar" class="size-9 rounded-full object-cover">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-slate-100">Sofia Alvarez</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-400">
<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-slate-400">@sofialabs</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-slate-300">
From chaos to clarity with one setup. Best email experience we've had in years.
</p>
</article>
<article
class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
<div class="flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5180d964-2425-4134-8220-c1528af09124_800w.jpg" alt="Avatar" class="size-9 rounded-full object-cover">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-slate-100">Jackson 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-400">
<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-slate-400">@jacksonlee</p>
</div>
</div>
<p class="mt-4 text-sm sm:text-base text-slate-300">
Clean interface, helpful AI, and thoughtful automation. It's the small things that matter.
</p>
</article>
</div>
</div>
<style>
@keyframes border-flow {
0% {
background-position: 0% 50%;
}
100% {
background-position: 400% 50%;
}
}
</style>
</div>
<style>
@keyframes glow-rotate {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
</section>