Tailwind CSS Marquee Blocks

Marquee

Tailwind CSS marquee blocks for vertical testimonials, 3D card stages, finance tickers, logo strips, and sliding social proof.

Vertical Marquee New Pro

Two stacked testimonial columns move in opposite directions, with gradient edges hiding the vertical loop.

<div class="grid gap-4 sm:grid-cols-2 relative w-full h-136 overflow-hidden before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:z-2 before:h-16 before:bg-[linear-gradient(to_bottom,var(--color-background),transparent)] after:bg-[linear-gradient(to_top,var(--color-background),transparent)] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:z-2 after:h-16">
          <div class="marquee-track-y [animation:marquee-y_52s_linear_infinite] hover:[animation-play-state:paused] flex w-full flex-col gap-4">
            
            <div class="flex flex-col gap-4">
              
              <figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?auto=format&fit=facearea&facepad=3&w=128&h=128&q=80" alt="Ava M.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Ava M.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@avam</p>
                  </div>
                </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                  We used this layout to keep social proof visible without sacrificing space above the fold.
                </blockquote>
              </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Liam R.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Liam R.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@liamr</p>
                  </div>
                </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                  Vertical motion reads especially well in a narrow column next to a hero message.
                </blockquote>
              </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1570654639102-bdd95efeca7a?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Sophie D.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Sophie D.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@sophied</p>
                  </div>
                </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                  It feels editorial instead of mechanical when the cards have enough breathing room.
                </blockquote>
              </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1659482634023-2c4fda99ac0c?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Jessica T.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Jessica T.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@jessicat</p>
                  </div>
                </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                  The soft gradient edges help the loop disappear and keep attention on the content.
                </blockquote>
              </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Noah P.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Noah P.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@noahp</p>
                  </div>
                </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                  More cards in the column makes the vertical movement feel more continuous and less staged.
                </blockquote>
              </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Emma C.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Emma C.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@emmac</p>
                  </div>
                </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                  This denser stack works better when the marquee sits next to a tall hero section.
                </blockquote>
              </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Owen B.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Owen B.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@owenb</p>
                  </div>
                </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                  The loop reads more naturally when there is less visual distance between repeated content.
                </blockquote>
              </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Mia F.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Mia F.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@miaf</p>
                  </div>
                </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                  It feels closer to an editorial sidebar now instead of a short scrolling sample.
                </blockquote>
              </figure>

</div>

<div class="flex flex-col gap-4" aria-hidden="true">
              
              <figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?auto=format&fit=facearea&facepad=3&w=128&h=128&q=80" alt="Ava M.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Ava M.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@avam</p>
                  </div>
                </div>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1570654639102-bdd95efeca7a?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Sophie D.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Sophie D.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@sophied</p>
                  </div>
                </div>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1659482634023-2c4fda99ac0c?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Jessica T.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Jessica T.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@jessicat</p>
                  </div>
                </div>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Noah P.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Noah P.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@noahp</p>
                  </div>
                </div>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Emma C.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Emma C.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@emmac</p>
                  </div>
                </div>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Owen B.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Owen B.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@owenb</p>
                  </div>
                </div>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Mia F.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Mia F.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@miaf</p>
                  </div>
                </div>

</div>
            
          </div>

<div class="marquee-track-y [animation:marquee-y_52s_linear_infinite] [animation-direction:reverse] hover:[animation-play-state:paused] flex w-full flex-col gap-4">
            
            <div class="flex flex-col gap-4">
              
              <figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Daniel N.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Daniel N.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@danieln</p>
                  </div>
                </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                  Running the second column in reverse keeps the whole section from feeling too uniform.
                </blockquote>
              </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1531927557220-a9e23c1e4794?auto=format&fit=facearea&facepad=2&w=128&h=128&q=80" alt="Rachel S.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Rachel S.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@rachels</p>
                  </div>
                </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                  The card rhythm stays easy to scan because each item remains readable while it moves.
                </blockquote>
              </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?auto=format&fit=facearea&facepad=2&w=128&h=128&q=80" alt="Michael D.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Michael D.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@michaeld</p>
                  </div>
                </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                  This variant pairs nicely with pricing sections, launches, and product proof points.
                </blockquote>
              </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1670272505340-d906d8d77d03?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Helen Y.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Helen Y.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@heleny</p>
                  </div>
                </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                  We kept the card width narrow so the motion feels elegant on both desktop and tablet.
                </blockquote>
              </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1504257432389-52343af06ae3?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Grace W.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Grace W.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@gracew</p>
                  </div>
                </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                  A taller stack gives the reverse column enough variety that the cycle stays subtle.
                </blockquote>
              </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Chloe A.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Chloe A.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@chloea</p>
                  </div>
                </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                  The extra items keep motion visible throughout the mask instead of bunching at the center.
                </blockquote>
              </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1504593811423-6dd665756598?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Ethan V.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Ethan V.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@ethanv</p>
                  </div>
                </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                  This feels much more natural for product quotes and proof points in a side rail.
                </blockquote>
              </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1521119989659-a83eee488004?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Nina H.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Nina H.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@ninah</p>
                  </div>
                </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                  The longer sequence hides the duplicated track better once the column starts looping.
                </blockquote>
              </figure>

</div>

<div class="flex flex-col gap-4" aria-hidden="true">
              
              <figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Daniel N.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Daniel N.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@danieln</p>
                  </div>
                </div>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1531927557220-a9e23c1e4794?auto=format&fit=facearea&facepad=2&w=128&h=128&q=80" alt="Rachel S.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Rachel S.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@rachels</p>
                  </div>
                </div>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?auto=format&fit=facearea&facepad=2&w=128&h=128&q=80" alt="Michael D.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Michael D.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@michaeld</p>
                  </div>
                </div>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1670272505340-d906d8d77d03?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Helen Y.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Helen Y.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@heleny</p>
                  </div>
                </div>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1504257432389-52343af06ae3?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Grace W.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Grace W.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@gracew</p>
                  </div>
                </div>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Chloe A.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Chloe A.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@chloea</p>
                  </div>
                </div>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1504593811423-6dd665756598?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Ethan V.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Ethan V.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@ethanv</p>
                  </div>
                </div>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                <div class="flex items-center gap-3">
                  <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1521119989659-a83eee488004?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Nina H.">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold text-foreground">Nina H.</p>
                    <p class="truncate text-xs text-muted-foreground-1">@ninah</p>
                  </div>
                </div>

</div>
            
          </div>
        </div>

3D Marquee New Pro

A tilted card stage uses perspective and vertical marquee tracks to create depth without JavaScript.

<div class="relative overflow-hidden rounded-2xl bg-background before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:z-3 before:h-20 before:bg-[linear-gradient(to_bottom,var(--color-background),transparent)] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:z-3 after:h-20 after:bg-[linear-gradient(to_top,var(--color-background),transparent)]">
          
          <div class="h-140 overflow-hidden perspective-[1000px] ">
            
            <div class="grid grid-cols-3 gap-5 w-220 h-240 origin-[50%_0%] [transform:translate3d(5%,-3%,0)_scale3d(.92,.86,1)_rotateX(15deg)_rotateY(-11deg)_rotateZ(28deg)] ">
              
              <div class="marquee-track-y [animation:marquee-y_60s_linear_infinite] flex flex-col gap-4">
                
                <figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?auto=format&fit=facearea&facepad=3&w=128&h=128&q=80" alt="Ava M.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Ava M.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@avam</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    Preline made our launch site feel polished in days, not weeks.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Liam R.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Liam R.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@liamr</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    The component quality is high enough that our team ships faster with fewer design tweaks.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1570654639102-bdd95efeca7a?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Sophie D.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Sophie D.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@sophied</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    We reused the same pattern across marketing and dashboard pages without it feeling repetitive.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1659482634023-2c4fda99ac0c?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Jessica T.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Jessica T.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@jessicat</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    A moving testimonial row adds energy while keeping the content lightweight.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Lucas K.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Lucas K.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@lucask</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    The pause-on-hover detail makes the interaction feel considered instead of noisy.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Noah P.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Noah P.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@noahp</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    Adding a few more items made the loop feel continuous instead of obviously repeated.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Emma C.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Emma C.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@emmac</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    The extra card density gives the marquee a steadier rhythm across wider screens.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Owen B.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Owen B.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@owenb</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    We liked how the cards keep moving without leaving awkward empty pockets in the row.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Mia F.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Mia F.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@miaf</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    It now feels closer to a production-ready testimonial stream than a short demo strip.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1568048689711-5e0325cea8c0?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Christina N.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Christina N.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@christinan</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    The stacked depth gives the marquee a stronger visual identity right away.
                  </blockquote>
                </figure>

</div>

<div class="marquee-track-y [animation:marquee-y_66s_linear_infinite] [animation-direction:reverse] flex flex-col gap-4 pt-18">
                
                <figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Daniel N.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Daniel N.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@danieln</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    It is one of those patterns that instantly makes a page feel alive without adding JavaScript.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1531927557220-a9e23c1e4794?auto=format&fit=facearea&facepad=2&w=128&h=128&q=80" alt="Rachel S.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Rachel S.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@rachels</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    We used it for logos first, then swapped in reviews and it still looked great.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?auto=format&fit=facearea&facepad=2&w=128&h=128&q=80" alt="Michael D.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Michael D.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@michaeld</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    Small cards, soft borders, and motion together make the whole section feel premium.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1568048689711-5e0325cea8c0?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Christina N.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Christina N.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@christinan</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    The duplicated track keeps the loop smooth enough that users barely notice the reset.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1670272505340-d906d8d77d03?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Helen Y.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Helen Y.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@heleny</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    It works especially well inside landing pages with testimonials, stats, or partner logos.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1504257432389-52343af06ae3?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Grace W.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Grace W.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@gracew</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    A longer row helps the reverse motion feel smoother and less patterned.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Chloe A.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Chloe A.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@chloea</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    We preferred this denser setup because the fade masks always have content moving through them.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1504593811423-6dd665756598?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Ethan V.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Ethan V.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@ethanv</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    It keeps the marquee lively even on larger monitors where short rows can feel sparse.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1521119989659-a83eee488004?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Nina H.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Nina H.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@ninah</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    The fuller sequence makes the duplicated track much harder to spot at a glance.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Owen B.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Owen B.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@owenb</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    We used a version like this to make a hero feel fuller without a complex layout.
                  </blockquote>
                </figure>

</div>
              
      
              
              <div class="marquee-track-y [animation:marquee-y_62s_linear_infinite] flex flex-col gap-4 pt-8">
                
                <figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Daniel N.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Daniel N.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@danieln</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    Alternating the direction helps the whole composition feel less repetitive.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1531927557220-a9e23c1e4794?auto=format&fit=facearea&facepad=2&w=128&h=128&q=80" alt="Rachel S.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Rachel S.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@rachels</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    It pulls attention without relying on oversized gradients or glow effects.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?auto=format&fit=facearea&facepad=2&w=128&h=128&q=80" alt="Michael D.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Michael D.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@michaeld</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    The center rail anchors the layout while the outer tracks give it movement.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1670272505340-d906d8d77d03?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Helen Y.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Helen Y.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@heleny</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    This format is especially good for hero sections and product storytelling.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1504257432389-52343af06ae3?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Grace W.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Grace W.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@gracew</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    The reverse motion keeps the angled composition feeling balanced.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Chloe A.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Chloe A.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@chloea</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    It looks bold, but the pattern is still simple enough to adapt quickly.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1504593811423-6dd665756598?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Ethan V.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Ethan V.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@ethanv</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    The diagonal stage makes the marquee feel more like a scene than a list.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1521119989659-a83eee488004?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Nina H.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Nina H.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@ninah</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    It adds depth without needing any custom JavaScript.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Mia F.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Mia F.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@miaf</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    The staggered columns make the loop much harder to detect.
                  </blockquote>
                </figure>

<figure class="w-full border border-card-line bg-card p-4 rounded-xl shadow-xs">
                  <div class="flex items-center gap-3">
                    <img class="size-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?auto=format&fit=facearea&facepad=2.5&w=128&h=128&q=80" alt="Lucas K.">
                    <div class="min-w-0">
                      <p class="truncate text-sm font-semibold text-foreground">Lucas K.</p>
                      <p class="truncate text-xs text-muted-foreground-1">@lucask</p>
                    </div>
                  </div>

<blockquote class="mt-3 text-sm text-muted-foreground-2">
                    It gives static testimonial content a much more dynamic frame.
                  </blockquote>
                </figure>

</div>
              
            </div>
            
          </div>
          
        </div>

Finance Ticker New Pro

A single-line stock ticker loops market quotes with compact symbols, prices, and movement indicators.

<div class="relative overflow-hidden border-y border-line-2 bg-background before:pointer-events-none before:absolute before:inset-y-0 before:start-0 before:z-2 before:w-16 before:bg-[linear-gradient(to_right,var(--color-background),transparent)] after:pointer-events-none after:absolute after:inset-y-0 after:end-0 after:z-2 after:w-16 after:bg-[linear-gradient(to_left,var(--color-background),transparent)]">
          <div class="flex overflow-hidden">
            <div class="marquee-track-x [animation:marquee-x_55s_linear_infinite] hover:[animation-play-state:paused] flex w-max gap-4 py-2.5">
              <div class="flex items-center gap-10 ps-4 text-sm">
                <span class="inline-flex items-center gap-2 whitespace-nowrap">
                  <span class="font-semibold tracking-wide text-foreground">ORCL</span>
                  <span class="font-mono tabular-nums text-muted-foreground">121.57</span>
                  <span class="inline-flex items-center gap-0.5 font-mono tabular-nums text-emerald-600 dark:text-emerald-400">
                    <svg class="size-3.5 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 3.5 13 11H3l5-7.5z"/></svg>
                    <span>0.50%</span>
                  </span>
                </span>
                <span class="inline-flex items-center gap-2 whitespace-nowrap">
                  <span class="font-semibold tracking-wide text-foreground">NVDA</span>
                  <span class="font-mono tabular-nums text-muted-foreground">128.04</span>
                  <span class="inline-flex items-center gap-0.5 font-mono tabular-nums text-rose-600 dark:text-rose-400">
                    <svg class="size-3.5 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 12.5 3 5h10l-5 7.5z"/></svg>
                    <span>1.20%</span>
                  </span>
                </span>
                <span class="inline-flex items-center gap-2 whitespace-nowrap">
                  <span class="font-semibold tracking-wide text-foreground">AAPL</span>
                  <span class="font-mono tabular-nums text-muted-foreground">198.32</span>
                  <span class="inline-flex items-center gap-0.5 font-mono tabular-nums text-emerald-600 dark:text-emerald-400">
                    <svg class="size-3.5 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 3.5 13 11H3l5-7.5z"/></svg>
                    <span>0.31%</span>
                  </span>
                </span>
                <span class="inline-flex items-center gap-2 whitespace-nowrap">
                  <span class="font-semibold tracking-wide text-foreground">MSFT</span>
                  <span class="font-mono tabular-nums text-muted-foreground">415.12</span>
                  <span class="inline-flex items-center gap-0.5 font-mono tabular-nums text-rose-600 dark:text-rose-400">
                    <svg class="size-3.5 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 12.5 3 5h10l-5 7.5z"/></svg>
                    <span>0.08%</span>
                  </span>
                </span>
                <span class="inline-flex items-center gap-2 whitespace-nowrap">
                  <span class="font-semibold tracking-wide text-foreground">GOOGL</span>
                  <span class="font-mono tabular-nums text-muted-foreground">175.40</span>
                  <span class="inline-flex items-center gap-0.5 font-mono tabular-nums text-emerald-600 dark:text-emerald-400">
                    <svg class="size-3.5 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 3.5 13 11H3l5-7.5z"/></svg>
                    <span>1.08%</span>
                  </span>
                </span>
                <span class="inline-flex items-center gap-2 whitespace-nowrap">
                  <span class="font-semibold tracking-wide text-foreground">META</span>
                  <span class="font-mono tabular-nums text-muted-foreground">585.22</span>
                  <span class="inline-flex items-center gap-0.5 font-mono tabular-nums text-rose-600 dark:text-rose-400">
                    <svg class="size-3.5 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 12.5 3 5h10l-5 7.5z"/></svg>
                    <span>0.42%</span>
                  </span>
                </span>
                <span class="inline-flex items-center gap-2 whitespace-nowrap">
                  <span class="font-semibold tracking-wide text-foreground">AMZN</span>
                  <span class="font-mono tabular-nums text-muted-foreground">178.90</span>
                  <span class="inline-flex items-center gap-0.5 font-mono tabular-nums text-emerald-600 dark:text-emerald-400">
                    <svg class="size-3.5 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 3.5 13 11H3l5-7.5z"/></svg>
                    <span>0.19%</span>
                  </span>
                </span>
                <span class="inline-flex items-center gap-2 whitespace-nowrap">
                  <span class="font-semibold tracking-wide text-foreground">TSLA</span>
                  <span class="font-mono tabular-nums text-muted-foreground">248.50</span>
                  <span class="inline-flex items-center gap-0.5 font-mono tabular-nums text-rose-600 dark:text-rose-400">
                    <svg class="size-3.5 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 12.5 3 5h10l-5 7.5z"/></svg>
                    <span>2.10%</span>
                  </span>
                </span>
              </div>
              <div class="flex items-center gap-10 pe-4 text-sm" aria-hidden="true">
                <span class="inline-flex items-center gap-2 whitespace-nowrap">
                  <span class="font-semibold tracking-wide text-foreground">ORCL</span>
                  <span class="font-mono tabular-nums text-muted-foreground">121.57</span>
                  <span class="inline-flex items-center gap-0.5 font-mono tabular-nums text-emerald-600 dark:text-emerald-400">
                    <svg class="size-3.5 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 3.5 13 11H3l5-7.5z"/></svg>
                    <span>0.50%</span>
                  </span>
                </span>
                <span class="inline-flex items-center gap-2 whitespace-nowrap">
                  <span class="font-semibold tracking-wide text-foreground">NVDA</span>
                  <span class="font-mono tabular-nums text-muted-foreground">128.04</span>
                  <span class="inline-flex items-center gap-0.5 font-mono tabular-nums text-rose-600 dark:text-rose-400">
                    <svg class="size-3.5 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 12.5 3 5h10l-5 7.5z"/></svg>
                    <span>1.20%</span>
                  </span>
                </span>
                <span class="inline-flex items-center gap-2 whitespace-nowrap">
                  <span class="font-semibold tracking-wide text-foreground">AAPL</span>
                  <span class="font-mono tabular-nums text-muted-foreground">198.32</span>
                  <span class="inline-flex items-center gap-0.5 font-mono tabular-nums text-emerald-600 dark:text-emerald-400">
                    <svg class="size-3.5 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 3.5 13 11H3l5-7.5z"/></svg>
                    <span>0.31%</span>
                  </span>
                </span>
                <span class="inline-flex items-center gap-2 whitespace-nowrap">
                  <span class="font-semibold tracking-wide text-foreground">MSFT</span>
                  <span class="font-mono tabular-nums text-muted-foreground">415.12</span>
                  <span class="inline-flex items-center gap-0.5 font-mono tabular-nums text-rose-600 dark:text-rose-400">
                    <svg class="size-3.5 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 12.5 3 5h10l-5 7.5z"/></svg>
                    <span>0.08%</span>
                  </span>
                </span>
                <span class="inline-flex items-center gap-2 whitespace-nowrap">
                  <span class="font-semibold tracking-wide text-foreground">GOOGL</span>
                  <span class="font-mono tabular-nums text-muted-foreground">175.40</span>
                  <span class="inline-flex items-center gap-0.5 font-mono tabular-nums text-emerald-600 dark:text-emerald-400">
                    <svg class="size-3.5 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 3.5 13 11H3l5-7.5z"/></svg>
                    <span>1.08%</span>
                  </span>
                </span>
                <span class="inline-flex items-center gap-2 whitespace-nowrap">
                  <span class="font-semibold tracking-wide text-foreground">META</span>
                  <span class="font-mono tabular-nums text-muted-foreground">585.22</span>
                  <span class="inline-flex items-center gap-0.5 font-mono tabular-nums text-rose-600 dark:text-rose-400">
                    <svg class="size-3.5 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 12.5 3 5h10l-5 7.5z"/></svg>
                    <span>0.42%</span>
                  </span>
                </span>
                <span class="inline-flex items-center gap-2 whitespace-nowrap">
                  <span class="font-semibold tracking-wide text-foreground">AMZN</span>
                  <span class="font-mono tabular-nums text-muted-foreground">178.90</span>
                  <span class="inline-flex items-center gap-0.5 font-mono tabular-nums text-emerald-600 dark:text-emerald-400">
                    <svg class="size-3.5 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 3.5 13 11H3l5-7.5z"/></svg>
                    <span>0.19%</span>
                  </span>
                </span>
                <span class="inline-flex items-center gap-2 whitespace-nowrap">
                  <span class="font-semibold tracking-wide text-foreground">TSLA</span>
                  <span class="font-mono tabular-nums text-muted-foreground">248.50</span>
                  <span class="inline-flex items-center gap-0.5 font-mono tabular-nums text-rose-600 dark:text-rose-400">
                    <svg class="size-3.5 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 12.5 3 5h10l-5 7.5z"/></svg>
                    <span>2.10%</span>
                  </span>
                </span>
              </div>
            </div>
          </div>
        </div>

Sliding Client Logos Pro

A logo strip repeats brand groups across one row, with faded edges and pause-on-hover motion.

<div class="relative overflow-hidden before:pointer-events-none before:absolute before:inset-y-0 before:start-0 before:z-2 before:w-20 before:h-full before:bg-[linear-gradient(to_right,var(--color-background),transparent)] after:pointer-events-none after:absolute after:inset-y-0 after:end-0 after:z-2 after:w-20 after:h-full after:bg-[linear-gradient(to_left,var(--color-background),transparent)]">
          <div class="flex items-center animate-marquee">
            
            <div class="flex items-center justify-around">
              <div class="px-4 w-40 md:w-64 h-12 flex shrink-0 justify-center items-center">
                <svg class="w-20 md:w-28 h-full object-contain text-foreground" width="391" height="86" viewBox="0 0 391 86" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M164.997 67.2927L150.691 9.90208H163.464L173.069 49.6471H173.24L187.069 9.90208H198.037L211.866 49.6471H212.036L221.71 9.90208H234.415L220.109 67.2927H207.097L192.621 28.918H192.45L177.906 67.2927H164.997Z" fill="currentColor"/><path d="M238.298 9.90208H250.322V28.918H250.492C251.548 26.965 253.66 25.3889 256.112 24.3268C258.394 23.3332 261.698 22.7164 264.628 22.7164C267.864 22.7164 272.292 23.5387 275.459 25.1834C278.661 26.9308 281.079 29.2606 282.68 32.2073C284.418 35.2567 285.269 38.6828 285.269 42.5204V67.2927H273.245V44.1309C273.245 40.7389 272.257 38.1347 270.248 36.2844C268.238 34.4344 265.513 33.5092 262.039 33.5092C258.565 33.5092 255.805 34.5029 253.592 36.4557C251.411 38.4089 250.356 40.9787 250.356 44.1309V67.2927H238.332V9.90208H238.298Z" fill="currentColor"/><path d="M289.493 45.6382C289.493 42.2118 290.14 39.0596 291.434 36.2159C292.728 33.372 294.5 30.9735 296.748 28.9863C298.996 26.999 301.584 25.4572 304.514 24.3608C307.443 23.2644 310.543 22.7162 313.779 22.7162C317.015 22.7162 320.285 23.2644 323.248 24.3951C326.211 25.5257 328.766 27.0675 330.981 29.0548C333.161 31.0421 334.897 33.4404 336.191 36.25C337.451 39.0596 338.099 42.1774 338.099 45.6038C338.099 49.0303 337.451 52.251 336.157 55.0605C334.864 57.8701 333.091 60.2685 330.878 62.2557C328.664 64.243 326.075 65.7847 323.112 66.8812C320.148 67.9774 317.049 68.5258 313.813 68.5258C310.577 68.5258 307.375 67.9774 304.412 66.8468C301.448 65.7162 298.894 64.1742 296.68 62.1529C294.5 60.1312 292.728 57.7328 291.434 54.9233C290.14 52.0796 289.493 48.9959 289.493 45.6382ZM326.075 45.6382C326.075 41.9376 324.951 38.9567 322.703 36.7296C320.455 34.5025 317.491 33.372 313.813 33.372C312.007 33.372 310.373 33.6803 308.84 34.2627C307.307 34.8796 306.012 35.7019 304.923 36.764C303.833 37.8261 303.015 39.128 302.402 40.6357C301.789 42.1774 301.516 43.8223 301.516 45.6382C301.516 47.4541 301.823 49.0987 302.402 50.6064C303.015 52.1137 303.867 53.4159 304.957 54.478C306.081 55.5742 307.375 56.3965 308.874 57.0134C310.373 57.6303 312.007 57.9041 313.813 57.9041C315.618 57.9041 317.253 57.5959 318.786 57.0134C320.319 56.3965 321.613 55.5742 322.703 54.5121C323.793 53.45 324.644 52.1481 325.224 50.6404C325.803 49.0987 326.075 47.4197 326.075 45.6382Z" fill="currentColor"/><path d="M342.492 22.6822H354.039V28.9181H354.211C354.958 27.2735 358.127 24.5325 360.648 23.8129C363.135 23.0934 365.655 22.7165 368.209 22.7165C371.447 22.7165 374.444 23.3332 377.17 24.5325C379.892 25.7317 382.21 27.3763 384.218 29.4321C386.196 31.5221 387.728 33.9204 388.852 36.6959C389.977 39.471 390.519 42.4519 390.519 45.6042C390.519 48.7564 389.977 51.9086 388.852 54.6838C387.728 57.4593 386.196 59.8917 384.218 61.9134C382.244 63.9691 379.892 65.5796 377.133 66.7443C374.408 67.9092 371.411 68.4917 368.245 68.4917C367.223 68.4917 366.066 68.3892 364.802 68.2179C363.509 68.0121 362.282 67.7379 361.058 67.3612C359.831 66.9844 358.673 66.5045 357.548 65.922C356.424 65.3395 355.504 64.6885 354.757 63.9007H354.585V85.6577H342.561L342.492 22.6822ZM378.43 45.6386C378.43 41.9379 377.305 38.957 375.089 36.7643C372.876 34.5713 369.912 33.4408 366.234 33.4408C364.941 33.4408 363.578 33.6465 362.215 34.0917C360.82 34.5373 359.559 35.1538 358.435 35.9761C357.31 36.7987 356.358 37.7924 355.64 38.9229C354.925 40.0535 354.552 41.3898 354.552 42.8631V48.3452C354.552 50.264 355.097 51.9086 356.219 53.3475C357.31 54.7522 358.739 55.8487 360.409 56.6026C362.146 57.4593 364.124 57.9045 366.337 57.9045C369.982 57.9045 372.909 56.7739 375.125 54.5124C377.305 52.2513 378.43 49.2704 378.43 45.6386Z" fill="currentColor"/><path d="M20.827 0.0678406C12.2513 0.0678406 6.3639 3.8324 1.87183 8.11027C1.87183 8.11027 0.0681903 9.82144 0.102221 9.88987L18.8873 28.7811L37.6723 9.88987C34.099 4.96174 27.395 0.0678406 20.827 0.0678406Z" fill="currentColor"/><path d="M67.2103 0.0678406C58.6345 0.0678406 52.7471 3.8666 48.2553 8.11027C48.2553 8.11027 46.6216 9.7872 46.5197 9.88987L23.3105 33.2301L42.0616 52.0869L84.0217 9.88987C80.4484 4.96174 73.7443 0.0678406 67.2103 0.0678406Z" fill="currentColor"/><path d="M113.698 0.0678406C105.122 0.0678406 99.2347 3.8666 94.7426 8.11027C94.7426 8.11027 93.0411 9.78724 92.9729 9.88991L46.521 56.5701L51.4214 61.4983C59.0102 69.1301 71.4657 69.1301 79.0886 61.4983L130.441 9.88991C126.902 4.96174 120.266 0.0678406 113.698 0.0678406Z" fill="currentColor"/>
                </svg>
              </div>

<div class="flex items-center justify-around">
              <div class="px-4 w-40 md:w-64 h-12 flex shrink-0 justify-center items-center">
                <svg class="w-20 md:w-28 h-full object-contain text-foreground" width="391" height="86" viewBox="0 0 391 86" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M164.997 67.2927L150.691 9.90208H163.464L173.069 49.6471H173.24L187.069 9.90208H198.037L211.866 49.6471H212.036L221.71 9.90208H234.415L220.109 67.2927H207.097L192.621 28.918H192.45L177.906 67.2927H164.997Z" fill="currentColor"/><path d="M238.298 9.90208H250.322V28.918H250.492C251.548 26.965 253.66 25.3889 256.112 24.3268C258.394 23.3332 261.698 22.7164 264.628 22.7164C267.864 22.7164 272.292 23.5387 275.459 25.1834C278.661 26.9308 281.079 29.2606 282.68 32.2073C284.418 35.2567 285.269 38.6828 285.269 42.5204V67.2927H273.245V44.1309C273.245 40.7389 272.257 38.1347 270.248 36.2844C268.238 34.4344 265.513 33.5092 262.039 33.5092C258.565 33.5092 255.805 34.5029 253.592 36.4557C251.411 38.4089 250.356 40.9787 250.356 44.1309V67.2927H238.332V9.90208H238.298Z" fill="currentColor"/><path d="M289.493 45.6382C289.493 42.2118 290.14 39.0596 291.434 36.2159C292.728 33.372 294.5 30.9735 296.748 28.9863C298.996 26.999 301.584 25.4572 304.514 24.3608C307.443 23.2644 310.543 22.7162 313.779 22.7162C317.015 22.7162 320.285 23.2644 323.248 24.3951C326.211 25.5257 328.766 27.0675 330.981 29.0548C333.161 31.0421 334.897 33.4404 336.191 36.25C337.451 39.0596 338.099 42.1774 338.099 45.6038C338.099 49.0303 337.451 52.251 336.157 55.0605C334.864 57.8701 333.091 60.2685 330.878 62.2557C328.664 64.243 326.075 65.7847 323.112 66.8812C320.148 67.9774 317.049 68.5258 313.813 68.5258C310.577 68.5258 307.375 67.9774 304.412 66.8468C301.448 65.7162 298.894 64.1742 296.68 62.1529C294.5 60.1312 292.728 57.7328 291.434 54.9233C290.14 52.0796 289.493 48.9959 289.493 45.6382ZM326.075 45.6382C326.075 41.9376 324.951 38.9567 322.703 36.7296C320.455 34.5025 317.491 33.372 313.813 33.372C312.007 33.372 310.373 33.6803 308.84 34.2627C307.307 34.8796 306.012 35.7019 304.923 36.764C303.833 37.8261 303.015 39.128 302.402 40.6357C301.789 42.1774 301.516 43.8223 301.516 45.6382C301.516 47.4541 301.823 49.0987 302.402 50.6064C303.015 52.1137 303.867 53.4159 304.957 54.478C306.081 55.5742 307.375 56.3965 308.874 57.0134C310.373 57.6303 312.007 57.9041 313.813 57.9041C315.618 57.9041 317.253 57.5959 318.786 57.0134C320.319 56.3965 321.613 55.5742 322.703 54.5121C323.793 53.45 324.644 52.1481 325.224 50.6404C325.803 49.0987 326.075 47.4197 326.075 45.6382Z" fill="currentColor"/><path d="M342.492 22.6822H354.039V28.9181H354.211C354.958 27.2735 358.127 24.5325 360.648 23.8129C363.135 23.0934 365.655 22.7165 368.209 22.7165C371.447 22.7165 374.444 23.3332 377.17 24.5325C379.892 25.7317 382.21 27.3763 384.218 29.4321C386.196 31.5221 387.728 33.9204 388.852 36.6959C389.977 39.471 390.519 42.4519 390.519 45.6042C390.519 48.7564 389.977 51.9086 388.852 54.6838C387.728 57.4593 386.196 59.8917 384.218 61.9134C382.244 63.9691 379.892 65.5796 377.133 66.7443C374.408 67.9092 371.411 68.4917 368.245 68.4917C367.223 68.4917 366.066 68.3892 364.802 68.2179C363.509 68.0121 362.282 67.7379 361.058 67.3612C359.831 66.9844 358.673 66.5045 357.548 65.922C356.424 65.3395 355.504 64.6885 354.757 63.9007H354.585V85.6577H342.561L342.492 22.6822ZM378.43 45.6386C378.43 41.9379 377.305 38.957 375.089 36.7643C372.876 34.5713 369.912 33.4408 366.234 33.4408C364.941 33.4408 363.578 33.6465 362.215 34.0917C360.82 34.5373 359.559 35.1538 358.435 35.9761C357.31 36.7987 356.358 37.7924 355.64 38.9229C354.925 40.0535 354.552 41.3898 354.552 42.8631V48.3452C354.552 50.264 355.097 51.9086 356.219 53.3475C357.31 54.7522 358.739 55.8487 360.409 56.6026C362.146 57.4593 364.124 57.9045 366.337 57.9045C369.982 57.9045 372.909 56.7739 375.125 54.5124C377.305 52.2513 378.43 49.2704 378.43 45.6386Z" fill="currentColor"/><path d="M20.827 0.0678406C12.2513 0.0678406 6.3639 3.8324 1.87183 8.11027C1.87183 8.11027 0.0681903 9.82144 0.102221 9.88987L18.8873 28.7811L37.6723 9.88987C34.099 4.96174 27.395 0.0678406 20.827 0.0678406Z" fill="currentColor"/><path d="M67.2103 0.0678406C58.6345 0.0678406 52.7471 3.8666 48.2553 8.11027C48.2553 8.11027 46.6216 9.7872 46.5197 9.88987L23.3105 33.2301L42.0616 52.0869L84.0217 9.88987C80.4484 4.96174 73.7443 0.0678406 67.2103 0.0678406Z" fill="currentColor"/><path d="M113.698 0.0678406C105.122 0.0678406 99.2347 3.8666 94.7426 8.11027C94.7426 8.11027 93.0411 9.78724 92.9729 9.88991L46.521 56.5701L51.4214 61.4983C59.0102 69.1301 71.4657 69.1301 79.0886 61.4983L130.441 9.88991C126.902 4.96174 120.266 0.0678406 113.698 0.0678406Z" fill="currentColor"/>
                </svg>
              </div>

Open related SaaS Startup pricing page

Sliding Testimonials Pro

Two testimonial rows move in opposite directions, creating a continuous social-proof band.

<div class="relative bg-background overflow-hidden flex flex-col gap-y-3 before:pointer-events-none before:absolute before:inset-y-0 before:inset-s-0 before:z-1 before:w-2/12 before:h-full before:bg-[linear-gradient(to_right,var(--color-background),transparent)] after:pointer-events-none after:absolute after:inset-y-0 after:inset-e-0 after:z-1 after:w-2/12 after:h-full after:bg-[linear-gradient(to_left,var(--color-background),transparent)]">
          <div class="flex w-max gap-x-3 animate-marquee">
            <div class="flex flex-row gap-x-3">
            
            <div class="flex flex-col bg-card border border-card-line rounded-xl">
              <div class="w-100 min-h-50 p-4 md:p-6">
                <div class="flex items-center gap-x-3 mb-5">
                  <img class="inline-block size-9 rounded-full" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Ava M.">
                  <div class="grow">
                    <p class="font-semibold text-foreground">Ava M.</p>
                  </div>
                </div>
                <p class="text-start leading-7 text-muted-foreground-1">
                  Working with this team was seamless. They took our vision and turned it into a responsive, beautiful site in record time.
                </p>
              </div>
            </div>

<div class="flex flex-col bg-card border border-card-line rounded-xl">
              <div class="w-100 min-h-50 p-4 md:p-6">
                <div class="flex items-center gap-x-3 mb-5">
                  <img class="inline-block size-9 rounded-full" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Lucas K.">
                  <div class="grow">
                    <p class="font-semibold text-foreground">Lucas K.</p>
                  </div>
                </div>
                <p class="text-start leading-7 text-muted-foreground-1">
                  From the first meeting to launch day, the process was professional and stress-free. The Preline components gave us a sleek, modern look.
                </p>
              </div>
            </div>
            
            </div>
            <div class="flex flex-row gap-x-3" aria-hidden="true">
            
            <div class="flex flex-col bg-card border border-card-line rounded-xl">
              <div class="w-100 min-h-50 p-4 md:p-6">
                <div class="flex items-center gap-x-3 mb-5">
                  <img class="inline-block size-9 rounded-full" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Ava M.">
                  <div class="grow">
                    <p class="font-semibold text-foreground">Ava M.</p>
                  </div>
                </div>
                <p class="text-start leading-7 text-muted-foreground-1">
                  Working with this team was seamless. They took our vision and turned it into a responsive, beautiful site in record time.
                </p>
              </div>
            </div>

<div class="flex w-max gap-x-3 animate-marquee-reverse">
            <div class="flex flex-row gap-x-3">
            
            <div class="flex flex-col bg-card border border-card-line rounded-xl">
              <div class="w-100 min-h-50 p-4 md:p-6">
                <div class="flex items-center gap-x-3 mb-5">
                  <img class="inline-block size-9 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Daniel N.">
                  <div class="grow">
                    <p class="font-semibold text-foreground">Daniel N.</p>
                  </div>
                </div>
                <p class="text-start leading-7 text-muted-foreground-1">
                  We needed fast, flexible frontend support, and they delivered. Preline was the perfect foundation for our growing platform.
                </p>
              </div>
            </div>

<div class="flex flex-col bg-card border border-card-line rounded-xl">
              <div class="w-100 min-h-50 p-4 md:p-6">
                <div class="flex items-center gap-x-3 mb-5">
                  <img class="inline-block size-9 rounded-full" src="https://images.unsplash.com/photo-1670272505340-d906d8d77d03?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Helen Y.">
                  <div class="grow">
                    <p class="font-semibold text-foreground">Helen Y.</p>
                  </div>
                </div>
                <p class="text-start leading-7 text-muted-foreground-1">
                  As a developer, I appreciated how clean and reusable the codebase was. Preline made it easy to hand off to our internal team.
                </p>
              </div>
            </div>
            
            </div>
            <div class="flex flex-row gap-x-3" aria-hidden="true">
            
            <div class="flex flex-col bg-card border border-card-line rounded-xl">
              <div class="w-100 min-h-50 p-4 md:p-6">
                <div class="flex items-center gap-x-3 mb-5">
                  <img class="inline-block size-9 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Daniel N.">
                  <div class="grow">
                    <p class="font-semibold text-foreground">Daniel N.</p>
                  </div>
                </div>
                <p class="text-start leading-7 text-muted-foreground-1">
                  We needed fast, flexible frontend support, and they delivered. Preline was the perfect foundation for our growing platform.
                </p>
              </div>
            </div>