Home
Walid Ahmad
Linear infinite brand scrolling with hover effect

Linear infinite brand scrolling with hover effect

Beautiful lineat brand scrolling partner with hover effect

This tailwind example is contributed by Walid Ahmad, on 02-Sep-2024. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Walid Ahmad

Fork Fullscreen

<section class="flex flex-col  gap-10 py-16 bg-[#F7F7F7]">
  <div class="flex gap-4 flex-col px-4 h-full relative  z-50  md:w-[85%] w-[95%] mx-auto">
    <div class="flex items-center gap-4">
      <h2 class="font-poppins text-[24px] shrink-0 font-semibold">
        Partners & Brands
      </h2>
      <div class="bg-[#D5D5D5] h-[2px] rounded-full  w-full"></div>
    </div>
    <div id="scroll-container"
      class="flex flex-1 overflow-x-scroll no-scrollbar hover:animate-none relative flex-col gap-2 scroll-linear">
      <ul class="px-4 flex gap-2">
        <li class="">
          <img
                  src="https://images.unsplash.com/photo-1615882320536-208ec95403e4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxicmFuZHN8ZW58MHwwfHx8MTcyNTI3MTY5Nnww&ixlib=rb-4.0.3&q=80&w=1080"
                  class="bg-app_white min-w-[300px] h-[300px] shrink-0"
                  alt=""
                />
        </li>
        <li class="">
          <img
                  src="https://images.unsplash.com/photo-1615882320536-208ec95403e4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxicmFuZHN8ZW58MHwwfHx8MTcyNTI3MTY5Nnww&ixlib=rb-4.0.3&q=80&w=1080"
                  class="bg-app_white min-w-[300px] h-[300px] shrink-0"
                  alt=""
                />
        </li>
        <li class="">
          <img
                  src="https://images.unsplash.com/photo-1615882320536-208ec95403e4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxicmFuZHN8ZW58MHwwfHx8MTcyNTI3MTY5Nnww&ixlib=rb-4.0.3&q=80&w=1080"
                  class="bg-app_white min-w-[300px] h-[300px] shrink-0"
                  alt=""
                />
        </li>
        <li class="">
          <img
                  src="https://images.unsplash.com/photo-1615882320536-208ec95403e4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxicmFuZHN8ZW58MHwwfHx8MTcyNTI3MTY5Nnww&ixlib=rb-4.0.3&q=80&w=1080"
                  class="bg-app_white min-w-[300px] h-[300px] shrink-0"
                  alt=""
                />
        </li>
        <li class="">
          <img
                  src="https://images.unsplash.com/photo-1615882320536-208ec95403e4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxicmFuZHN8ZW58MHwwfHx8MTcyNTI3MTY5Nnww&ixlib=rb-4.0.3&q=80&w=1080"
                  class="bg-app_white min-w-[300px] h-[300px] shrink-0"
                  alt=""
                />
        </li>
        <li class="">
          <img
                  src="https://images.unsplash.com/photo-1615882320536-208ec95403e4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxicmFuZHN8ZW58MHwwfHx8MTcyNTI3MTY5Nnww&ixlib=rb-4.0.3&q=80&w=1080"
                  class="bg-app_white min-w-[300px] h-[300px] shrink-0"
                  alt=""
                />
        </li>
        <li class="">
          <img
                  src="https://images.unsplash.com/photo-1615882320536-208ec95403e4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxicmFuZHN8ZW58MHwwfHx8MTcyNTI3MTY5Nnww&ixlib=rb-4.0.3&q=80&w=1080"
                  class="bg-app_white min-w-[300px] h-[300px] shrink-0"
                  alt=""
                />
        </li>
        <li class="">
          <img
                  src="https://images.unsplash.com/photo-1615882320536-208ec95403e4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxicmFuZHN8ZW58MHwwfHx8MTcyNTI3MTY5Nnww&ixlib=rb-4.0.3&q=80&w=1080"
                  class="bg-app_white min-w-[300px] h-[300px] shrink-0"
                  alt=""
                />
        </li>
        <li class="">
          <img
                  src="https://images.unsplash.com/photo-1615882320536-208ec95403e4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxicmFuZHN8ZW58MHwwfHx8MTcyNTI3MTY5Nnww&ixlib=rb-4.0.3&q=80&w=1080"
                  class="bg-app_white min-w-[300px] h-[300px] shrink-0"
                  alt=""
                />
        </li>
        <li class="">
          <img
                  src="https://images.unsplash.com/photo-1615882320536-208ec95403e4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxicmFuZHN8ZW58MHwwfHx8MTcyNTI3MTY5Nnww&ixlib=rb-4.0.3&q=80&w=1080"
                  class="bg-app_white min-w-[300px] h-[300px] shrink-0"
                  alt=""
                />
        </li>
        <li class="">
          <img
                  src="https://images.unsplash.com/photo-1615882320536-208ec95403e4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxicmFuZHN8ZW58MHwwfHx8MTcyNTI3MTY5Nnww&ixlib=rb-4.0.3&q=80&w=1080"
                  class="bg-app_white min-w-[300px] h-[300px] shrink-0"
                  alt=""
                />
        </li>
        <li class="">
          <img
                  src="https://images.unsplash.com/photo-1615882320536-208ec95403e4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxicmFuZHN8ZW58MHwwfHx8MTcyNTI3MTY5Nnww&ixlib=rb-4.0.3&q=80&w=1080"
                  class="bg-app_white min-w-[300px] h-[300px] shrink-0"
                  alt=""
                />
        </li>
        <li class="">
          <img
                  src="https://images.unsplash.com/photo-1615882320536-208ec95403e4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxicmFuZHN8ZW58MHwwfHx8MTcyNTI3MTY5Nnww&ixlib=rb-4.0.3&q=80&w=1080"
                  class="bg-app_white min-w-[300px] h-[300px] shrink-0"
                  alt=""
                />
        </li>
        <li class="">
          <img
                  src="https://images.unsplash.com/photo-1615882320536-208ec95403e4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxicmFuZHN8ZW58MHwwfHx8MTcyNTI3MTY5Nnww&ixlib=rb-4.0.3&q=80&w=1080"
                  class="bg-app_white min-w-[300px] h-[300px] shrink-0"
                  alt=""
                />
        </li>
        <li class="">
          <img
                  src="https://images.unsplash.com/photo-1615882320536-208ec95403e4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxicmFuZHN8ZW58MHwwfHx8MTcyNTI3MTY5Nnww&ixlib=rb-4.0.3&q=80&w=1080"
                  class="bg-app_white min-w-[300px] h-[300px] shrink-0"
                  alt=""
                />
        </li>
        <li class="">
          <img
                  src="https://images.unsplash.com/photo-1615882320536-208ec95403e4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxicmFuZHN8ZW58MHwwfHx8MTcyNTI3MTY5Nnww&ixlib=rb-4.0.3&q=80&w=1080"
                  class="bg-app_white min-w-[300px] h-[300px] shrink-0"
                  alt=""
                />
        </li>
      </ul>
    </div>
  </div>
</section>

Related Examples

Coffee & Tea
Coffee: A brewed drink prepared from roasted seeds, called coffee beans, of the coffee plant. Tea: An agricultural product of the leaves, leaf buds, and internodes of various cultivars and sub-varieties of the Camellia sinensis plant, processed and cured using various methods.

Author:
Augustin

3 months ago

626
3d card
the Best 3D card with tailwind css

Author:
irahoza daniel

3 months ago

104
cards
cards with background animation

Author:
Anonymous

2 years ago

10.9k
Midnight Lava Lamp
Inspired by Steam's old "Big Picture" ambiance. Based on anonymous/background-animation-2

Author:
Nick Girga

4 months ago

634
Full HTML Version
What's Included: Title*: Required input Description: Optional textarea Fully responsive and dark mode ready Simple validation (required on title)

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

374
hello world
by salvator

Author:
Anonymous

3 months ago

282
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Author:
Abhiraj

7 months ago

1.3k
Maintenance page template
The site is under maintenance placeholder page

Author:
Anonymous

1 year ago

9.3k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Mohit Prajapat

5 months ago

489
Fake Medicine Detector
Fake Medicine Detector

Author:
Tanvir Hasan Bappy (Tanvir)

3 months ago

272
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2.4k
Fancy underline

Author:
Simon Scheffer

2 years ago

11.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components