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

1.6k

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

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:
M Junaid

6 months ago

456
Login Form
Login Form With google icon

Author:
Md. Tofayel islam

11 months ago

1.8k
status indicatior
status indicator navigation dashbord

Author:
Rushikesh Latpate

11 months ago

976
rotate card
rotate card

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.7k
Muhammad Umair Arshad - Frontend Developer Resume | React, TypeScript, Tailwind CSS
Professional resume of Muhammad Umair Arshad, a skilled Frontend Developer specializing in React, TypeScript, and Tailwind CSS. I build high-performance web applications with responsive UI design.

Author:
Muhammad Umair Arshad

8 months ago

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

Author:
ishimwe prince

7 months ago

971
Powerful Website Features
Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

Author:
KULDEEP

5 months ago

1k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

8 months ago

697
color blur
blur

Author:
BocchiChan

10 months ago

1.5k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

11 months ago

1.3k
Age verification 18+

Author:
Maxim

11 months ago

1k
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

5 months ago

980

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components