tickermarqueetailwindanimationbrandcarouselresponsivelanding

Animated Brand Ticker Marquee

Анимированный горизонтальный тикер брендов с Tailwind CSS. Демонстрирует логотипы компаний, отзывается на наведение. Идеален для лендингов и секций с отзывами.

Live Preview

Prompt

<div class="max-w-7xl lg:px-8 mr-auto ml-auto pr-6 pl-6">
  <p class="text-sm font-medium text-gray-500 font-geist text-center mb-8" style="">Trusted by industry leaders</p>

  <!-- Animated ticker -->
  <div class="relative overflow-hidden">
    <div class="flex animate-marquee whitespace-nowrap">
      <div class="flex items-center justify-center gap-16 lg:gap-20 mx-8">
        <div class="text-gray-400 text-lg font-medium tracking-tight hover:text-gray-300 transition-colors font-geist"
          style="">Apple</div>
        <div class="text-gray-400 text-lg font-medium tracking-tight hover:text-gray-300 transition-colors font-geist"
          style="">Tesla</div>
        <div class="text-gray-400 text-lg font-medium tracking-tight hover:text-gray-300 transition-colors font-geist"
          style="">Stripe</div>
        <div class="text-gray-400 text-lg font-medium tracking-tight hover:text-gray-300 transition-colors font-geist"
          style="">Notion</div>
        <div class="text-gray-400 text-lg font-medium tracking-tight hover:text-gray-300 transition-colors font-geist"
          style="">Figma</div>
        <div class="text-gray-400 text-lg font-medium tracking-tight hover:text-gray-300 transition-colors font-geist"
          style="">Linear</div>
      </div>
      <div class="flex items-center justify-center gap-16 lg:gap-20 mx-8">
        <div class="text-gray-400 text-lg font-medium tracking-tight hover:text-gray-300 transition-colors font-geist"
          style="">Apple</div>
        <div class="text-gray-400 text-lg font-medium tracking-tight hover:text-gray-300 transition-colors font-geist"
          style="">Tesla</div>
        <div class="text-gray-400 text-lg font-medium tracking-tight hover:text-gray-300 transition-colors font-geist"
          style="">Stripe</div>
        <div class="text-gray-400 text-lg font-medium tracking-tight hover:text-gray-300 transition-colors font-geist"
          style="">Notion</div>
        <div class="text-gray-400 text-lg font-medium tracking-tight hover:text-gray-300 transition-colors font-geist"
          style="">Figma</div>
        <div class="text-gray-400 text-lg font-medium tracking-tight hover:text-gray-300 transition-colors font-geist"
          style="">Linear</div>
      </div>
      <div class="flex items-center justify-center gap-16 lg:gap-20 mx-8">
        <div class="text-gray-400 text-lg font-medium tracking-tight hover:text-gray-300 transition-colors font-geist"
          style="">Apple</div>
        <div class="text-gray-400 text-lg font-medium tracking-tight hover:text-gray-300 transition-colors font-geist"
          style="">Tesla</div>
        <div class="text-gray-400 text-lg font-medium tracking-tight hover:text-gray-300 transition-colors font-geist"
          style="">Stripe</div>
        <div class="text-gray-400 text-lg font-medium tracking-tight hover:text-gray-300 transition-colors font-geist"
          style="">Notion</div>
        <div class="text-gray-400 text-lg font-medium tracking-tight hover:text-gray-300 transition-colors font-geist"
          style="">Figma</div>
        <div class="text-gray-400 text-lg font-medium tracking-tight hover:text-gray-300 transition-colors font-geist"
          style="">Linear</div>
      </div>
    </div>
  </div>
</div>

All Prompts