Home
SANJAY SINGH GARIYA
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase

Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase

Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

This tailwind example is contributed by SANJAY SINGH GARIYA, on 11-Mar-2025. Component is made with Tailwind CSS v3. It is responsive.

Other Logo cloud

Author SANJAY SINGH GARIYA

368

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Document</title>
</head>
<body>
    <style>
       
    .marque-container .Marquee-content {
         animation: marquee 40s linear infinite running;
    }
    .marque-container .Marquee-content:hover {
         animation-play-state: paused;
    }
     @-moz-keyframes marquee {
         0% {
             transform: translateX(0);
        }
         100% {
             transform: translate(-50%);
        }
    }
     @-webkit-keyframes marquee {
         0% {
             transform: translateX(0);
        }
         100% {
             transform: translate(-50%);
        }
    }
     @-o-keyframes marquee {
         0% {
             transform: translateX(0);
        }
         100% {
             transform: translate(-50%);
        }
    }
     @keyframes marquee {
         0% {
             transform: translateX(0);
        }
         100% {
             transform: translate(-50%);
        }
    }
     
    </style>
    <hr>
    <div class="marque-container  h-full w-full flex items-center justify-center bg-white text-base bg-[#3858E9] dark:bg-black">
    <div class="Marquee w-full box-border p-4 text-white font-light flex items-center overflow-hidden  bg-[#3858E9] dark:bg-black">
      <div class="Marquee-content flex animate-marquee hover:animate-pause  bg-[#3858E9] dark:bg-black">
        <div class="Marquee-tag w-52 mx-2 p-2 inline-flex items-center justify-center transition-all duration-900 ease-in-out hover:scale-110">
            <img src="https://white.logodownload.org/wp-content/uploads/2020/11/google-white-logo-2.png" alt="" srcset="" />
          </div>
      
          
          <div class="Marquee-tag w-52 mx-2 p-2 inline-flex items-center justify-center transition-all duration-900 ease-in-out hover:scale-110">
            <img src="https://www.shutterstock.com/image-vector/google-logo-editorial-vector-symbol-260nw-2317648589.jpg" alt="" srcset="" />
          </div>
      
          
          <div class="Marquee-tag w-52 mx-2 p-2 inline-flex items-center justify-center transition-all duration-900 ease-in-out hover:scale-110">
            <img src="https://www.shutterstock.com/image-vector/google-logo-editorial-vector-symbol-260nw-2317648589.jpg" alt="" srcset="" />
          </div>
      
          
          <div class="Marquee-tag w-52 mx-2 p-2 inline-flex items-center justify-center transition-all duration-900 ease-in-out hover:scale-110">
            <img src="https://white.logodownload.org/wp-content/uploads/2020/11/google-white-logo-2.png" alt="" srcset="" />
          </div>
          <div class="Marquee-tag w-52 mx-2 p-2 inline-flex items-center justify-center transition-all duration-900 ease-in-out hover:scale-110">
            <img src="https://www.shutterstock.com/image-vector/google-logo-editorial-vector-symbol-260nw-2317648589.jpg" alt="" srcset="" />
          </div>
      
          
          <div class="Marquee-tag w-52 mx-2 p-2 inline-flex items-center justify-center transition-all duration-900 ease-in-out hover:scale-110">
            <img src="https://white.logodownload.org/wp-content/uploads/2020/11/google-white-logo-2.png" alt="" srcset="" />
          </div>
      
          
          <div class="Marquee-tag w-52 mx-2 p-2 inline-flex items-center justify-center transition-all duration-900 ease-in-out hover:scale-110">
            <img src="https://www.shutterstock.com/image-vector/google-logo-editorial-vector-symbol-260nw-2317648589.jpg" alt="" srcset="" />
          </div>
      
          
          <div class="Marquee-tag w-52 mx-2 p-2 inline-flex items-center justify-center transition-all duration-900 ease-in-out hover:scale-110">
            <img src="https://white.logodownload.org/wp-content/uploads/2020/11/google-white-logo-2.png" alt="" srcset="" />
          </div>
          <div class="Marquee-tag w-52 mx-2 p-2 inline-flex items-center justify-center transition-all duration-900 ease-in-out hover:scale-110">
            <img src="https://www.shutterstock.com/image-vector/google-logo-editorial-vector-symbol-260nw-2317648589.jpg" alt="" srcset="" />
          </div>
      
          
          <div class="Marquee-tag w-52 mx-2 p-2 inline-flex items-center justify-center transition-all duration-900 ease-in-out hover:scale-110">
            <img src="https://white.logodownload.org/wp-content/uploads/2020/11/google-white-logo-2.png" alt="" srcset="" />
          </div>
      
          
          <div class="Marquee-tag w-52 mx-2 p-2 inline-flex items-center justify-center transition-all duration-900 ease-in-out hover:scale-110">
            <img src="https://www.shutterstock.com/image-vector/google-logo-editorial-vector-symbol-260nw-2317648589.jpg" alt="" srcset="" />
          </div>

Related Examples

Google map iframe with tailwind

Author:
Kofi Osei

2 years ago

20.2k
Privacy Policy
Privacy Policy

Author:
Tanvir Hasan Bappy (Tanvir)

5 months ago

443
Organization Hierarchy list

Author:
Anonymous

1 year ago

7.5k
Multi Step form with javascript
A Beautiful multi step form using HTML CSS and JS

Author:
Walid Ahmad

6 months ago

785
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

2 years ago

8.9k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

3 weeks ago

128
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

1 month ago

69
free tailwind resume template
free tailwind resume template

Author:
Geoffrey Callaghan

1 year ago

3.3k
Tailwind invoice example

Author:
Elijah Davis

2 years ago

18k
cards
cards with background animation

Author:
Anonymous

1 year ago

10.5k
Share button

Author:
Maxim

4 months ago

1k
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:
Abhiraj

3 months ago

834

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components