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.4k

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

4 months ago

409
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 days ago

40
coffee
a beverage brewed from the roasted and ground seeds of the tropical evergreen coffee plant. Coffee is one of the three most popular beverages in the world (alongside water and tea), and it is one of the most profitable international commodities

Author:
Augustin

5 months ago

745
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

Author:
ORGIN_DREAMS

5 months ago

503
Social Media Icons
Social Media Icons

Author:
Aman kumar

1 year ago

2.1k
Icon group

Author:
Conan Hilton

2 years ago

9.8k
blockquote

Author:
Freja Jensen

2 years ago

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

8 months ago

1.6k
Help and support center ticketing system
Help and support center ticketing system

Author:
Rushikesh Latpate

8 months ago

1.2k
Full HTML Version
What's Included: Title*: Required input Description: Optional textarea Fully responsive and dark mode ready Simple validation (required on title)

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

382
delivery
It will help us get our stuff delivered to your home in a way that your ordered items are delivered to your home.

Author:
Nishimwe Jeanine

4 months ago

302
Portfolio
This responsive portfolio with dark mode support includes: 1. Fully responsive design that works on both desktop and mobile devices 2. Dark mode toggle with system preference detection and local storage persistence 3. Indigo-800 and Blue-900 color scheme for primary colors in light and dark modes 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections using Intersection Observer 2. Hover effects on projects and buttons 3. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles, ARIA labels) Key features: - The color scheme uses Indigo-800 for light mode and orange-400 for dark mode as primary colors - Dark mode toggle in the header with a sun/moon icon - Sections fade in and slide up as they enter the viewport - Project cards have a hover effect with scaling and increased shadow - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens - Smooth scrolling behavior for navigation links - Dark mode preference is saved in local storage and syncs with system preference This implementation provides a visually appealing, accessible, and functional responsive portfolio with dark mode support, using HTML, Tailwind CSS, and vanilla JavaScript for the

Author:
nejaa badr

11 months ago

2.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components