Home
M Junaid
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 M Junaid , on 23-Jun-2025. Component is made with Tailwind CSS v3. It is responsive.

Other Logo cloud

Author M Junaid

427

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: translateX(-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

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.

Author:
SANJAY SINGH GARIYA

8 months ago

1.4k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

7 months ago

946
Typewriter effect in tailwindcss with this simple trick
source: https://dev.to/lazysock/make-a-typewriter-effect-with-tailwindcss-in-5-minutes-dc

Author:
Anonymous

2 years ago

11.5k
BONIMATOR Responsive Tailwind Starter Template
Responsive Tailwind Starter Template

Author:
Bonimater

5 months ago

716
Social Media Icons
Social Media Icons

Author:
Aman kumar

1 year ago

1.9k
Terms of Service Page Template

Author:
Anonymous

10 months ago

2k
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Author:
Rathanak Phan

5 months ago

479
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

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

Author:
Nick Girga

6 months ago

667
Life Tree
by salvator

Author:
Baraka Salvator

5 months ago

678
Giftcard grid

Author:
ariaw

2 months ago

193
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Author:
Muhammad Rizqi Juniyanto

1 year ago

3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components