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

2.4k

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

Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

2 years ago

17.5k
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Rathanak Phan

5 months ago

886
Responsive Light Mode Footer Component
This is a fully responsive and reusable light-mode footer component designed by ABNahid Agency. Built with a clean structure and optimized for modern web applications, this footer features essential sections, including About, Services, Contact, and Social Links. Ideal for personal portfolios, business websites, or startup platforms—plug and play in your React or HTML project.

Author:
Abdul Jabbar Al Nahid

3 months ago

415
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

Author:
MD Mostafa Niloy

1 week ago

32
walletp2p

Author:
Anonymous

10 months ago

1.3k
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Author:
Ameth Galarcio

1 year ago

2k
Invoice
Invoice

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

629
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

Author:
KULDEEP

4 months ago

346
Verify OTP
verification code

Author:
gidy

6 months ago

455
Powerful Website Features
Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

Author:
KULDEEP

4 months ago

770
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

216
Features Component

Author:
KULDEEP

4 months ago

716

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components