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

144

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

Full Page loading overlay

Author:
Bunny

1 year ago

9.6k
background animation
background animation

Author:
Jayendra Madara

1 month ago

330
Tailwind CSS Blog sharing buttons with blog details
Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

Author:
Abid Ullah

4 days ago

9
Your upside-down text

Author:
Isabella Kowalski

1 year ago

11.4k
Invoice template

Author:
Shakti

1 year ago

23.1k
Updated customer details page
Customer details page

Author:
Olivia Smith

3 months ago

978
Profile Form
Progressive Profile Form

Author:
Samuel Abera

5 months ago

1.5k
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Author:
Samuel Dawson

1 year ago

14.4k
Simple dialpad

Author:
Brandon D

1 year ago

10k
Privacy policy page template

Author:
Anonymous

4 months ago

505
Typewriter effect
using javascript

Author:
Samuel Dawson

1 year ago

29.9k
Stepper - Without Buttons

Author:
farisubuntu

1 month ago

56

Explore components by Tags

Didn't find component you were looking for?

Search from 1600+ componenent