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

556

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

Verify OTP
verification code

Author:
gidy

2 weeks ago

35
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

1 month ago

239
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

4 months ago

869
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Author:
Abhiraj

4 months ago

845
random design

Author:
QQ-VVN

1 month ago

55
Play, Pause and Stop buttons

Author:
Lukas Müller

2 years ago

10.8k
responsive home page
the best home page

Author:
irahoza daniel

3 weeks ago

114
visacardes
I'll create professional Visa card components with realistic styling and multiple card types

Author:
ishimwe prince

3 weeks ago

156
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

5 months ago

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

19.2k
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Author:
Abdul Baset Bappy

2 months ago

500
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Author:
Abdul Baset Bappy

2 months ago

298

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components