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 v3.4. It is responsive.

Other

Author Walid Ahmad

Tailwind v3.4 3k 6

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

Verify OTP
verification code

gidy

1 year ago

1.6k
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Rathanak Phan

1 year ago

1.3k
Checkbox
Checkbox

Aman kumar

2 years ago

2.8k
Interactive Multi-Method Donation Section
Overview: A high-trust, conversion-oriented fundraising section styled in the project's signature Navy Blue theme. It provides users with flexible payment options, ranging from one-click fixed amounts to manual bank transfers and cryptocurrency donations. Key Features: Smart Amount Logic: Includes a JavaScript-powered selector where users can choose a preset amount ($10, $25, $50) or type a custom value. The interface automatically toggles states (deselecting buttons when typing, and vice-versa) to prevent user error. Payment Methods: Quick Card/Checkout: Primary call-to-action column. Bank Transfer: A clean card displaying account details with a "Copy to Clipboard" utility. Crypto (Bitcoin): A specialized dark-themed card featuring a placeholder QR code and wallet address copying functionality. Trust Signals: Includes security iconography (lock, shield) and reassuring copy to boost donor confidence. Visual Hierarchy: Uses a 7/5 grid split to prioritize the immediate donation action while keeping manual payment methods accessible but secondary. Tech Stack: Framework: Tailwind CSS. Icons: Ionicons. Scripting: Vanilla JavaScript (for amount toggling and clipboard copying functions). Fonts: DM Serif Display (Headings) + Inter (Body). Usage: Ideal for the "Support Us" page or a dedicated campaign landing page. The script tag included at the bottom handles all the interactivity (button selection and text copying) without needing external libraries.

Juan D. Cortorreal

11 months ago

1.3k
Invoice
Invoice

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.4k
Hacker terminal #fake
hacker terminal tailwind css

QQ-VVN

1 year ago

2k
BONIMATOR Responsive Tailwind Starter Template
Responsive Tailwind Starter Template

Bonimater

1 year ago

1.3k
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Hamza Atig

1 year ago

1.6k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Hamza Atig

1 year ago

1.7k
Elegant Dock
Useful Tailwind classes for constructing a basic Dock (usually used on mobile).

Nick Girga

1 year ago

1.4k
nft card
nft card

5upreme505

2 years ago

2.2k
loginForm3
form

Anonymous

1 month ago

78