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.9k

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

Clean AI Workspace Dashboard
A pristine, light-mode SaaS interface designed for AI chat applications. It features a structured three-column layout: a navigation sidebar with a theme toggle, a central workspace showcasing a "Welcome" state with colorful quick-action entry cards and a floating input bar, and a right-hand sidebar for project context. The design relies on soft grays, subtle borders (border-gray-200), and ample whitespace to create a focused, professional productivity environment.

Author:
Hamza Atig

8 months ago

843
machine
A fully interactive, web-based macOS-style desktop environment featuring draggable and resizable windows, a dynamic Dock with magnification, smooth glass UI effects, adaptive colors, a functional photo gallery with hover menus, and integrated mini-apps like Safari, Notes, Weather, and App Store. Built using HTML, CSS, Tailwind, and JavaScript to recreate a modern OS experience directly in the browser.

Author:
Gidy Official

9 months ago

568
GMT Live Coding

Author:
Seth

6 months ago

361
Fancy underline

Author:
Simon Scheffer

3 years ago

13.2k
Privacy Policy Page Template

Author:
Anonymous

1 year ago

2.2k
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

2 years ago

2.3k
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Author:
Ayyamperumal S

6 months ago

457
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Author:
Ranit Saha

1 year ago

2.6k
Testimonial that What Client Says

Author:
Abdul Baset Bappy

1 year ago

1.9k
Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Author:
Abdul Baset Bappy

1 year ago

1.9k
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Author:
Indra

1 year ago

1.1k
اصقل جسدك صفحة Landing

Author:
Hasan AlDoy (McDoy)

4 months ago

164

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components