FeaturedNew
MarqueesLogos Marquee Strip
An endless horizontal strip of wordmarks that loops seamlessly for social proof.
#marquee#logos#infinite-scroll
3 frameworksBeginner
Loading…
Fixed-width quote cards that scroll continuously, each with an avatar and role.
<style>
@keyframes marquee-testimonials-scroll {
to { transform: translateX(-50%); }
}
</style>
<section class="w-full overflow-hidden py-6" aria-label="What customers say">
<div class="flex w-max animate-[marquee-testimonials-scroll_40s_linear_infinite] motion-reduce:w-full motion-reduce:animate-none">
<ul class="flex shrink-0 items-stretch gap-4 pr-4 motion-reduce:w-full motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-4 motion-reduce:pr-0">
<li class="w-72 shrink-0">
<figure class="flex h-full flex-col justify-between rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
<blockquote class="text-sm leading-relaxed text-gray-700 dark:text-gray-300">“It paid for itself in the first week. We shipped the migration in two days.”</blockquote>
<figcaption class="mt-4 flex items-center gap-3">
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-semibold text-white" aria-hidden="true">MR</span>
<span class="min-w-0"><span class="block truncate text-sm font-semibold text-gray-900 dark:text-gray-100">Maya Rao</span><span class="block truncate text-xs text-gray-500 dark:text-gray-400">Head of Platform</span></span>
</figcaption>
</figure>
</li>
<li class="w-72 shrink-0">
<figure class="flex h-full flex-col justify-between rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
<blockquote class="text-sm leading-relaxed text-gray-700 dark:text-gray-300">“Support answered in minutes and actually fixed the root cause. Rare.”</blockquote>
<figcaption class="mt-4 flex items-center gap-3">
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-semibold text-white" aria-hidden="true">JL</span>
<span class="min-w-0"><span class="block truncate text-sm font-semibold text-gray-900 dark:text-gray-100">Jonah Lee</span><span class="block truncate text-xs text-gray-500 dark:text-gray-400">CTO, Northwind</span></span>
</figcaption>
</figure>
</li>
</ul>
<ul class="flex shrink-0 items-stretch gap-4 pr-4 motion-reduce:hidden" aria-hidden="true">
<li class="w-72 shrink-0">
<figure class="flex h-full flex-col justify-between rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
<blockquote class="text-sm leading-relaxed text-gray-700 dark:text-gray-300">“It paid for itself in the first week. We shipped the migration in two days.”</blockquote>
<figcaption class="mt-4 flex items-center gap-3">
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-semibold text-white">MR</span>
<span class="min-w-0"><span class="block truncate text-sm font-semibold text-gray-900 dark:text-gray-100">Maya Rao</span><span class="block truncate text-xs text-gray-500 dark:text-gray-400">Head of Platform</span></span>
</figcaption>
</figure>
</li>
<li class="w-72 shrink-0">
<figure class="flex h-full flex-col justify-between rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
<blockquote class="text-sm leading-relaxed text-gray-700 dark:text-gray-300">“Support answered in minutes and actually fixed the root cause. Rare.”</blockquote>
<figcaption class="mt-4 flex items-center gap-3">
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-semibold text-white">JL</span>
<span class="min-w-0"><span class="block truncate text-sm font-semibold text-gray-900 dark:text-gray-100">Jonah Lee</span><span class="block truncate text-xs text-gray-500 dark:text-gray-400">CTO, Northwind</span></span>
</figcaption>
</figure>
</li>
</ul>
</div>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
items | { quote: string; name: string; role: string }[] | 4 sample quotes | The array of items to render. |
durationSeconds | number | 40 | Duration seconds |
className | string | - | Additional classes merged onto the root element. |
Cards are `w-72` so every quote takes the same width and the loop advances at a steady rhythm - variable widths make the -50% seam land mid-card. Pass your own `items` array of quote, name and role.