Home
nejaa badr
trusted by

trusted by

1. Color Scheme:

1. Updated the background to a gradient from Indigo-800 to Blue-900
2. Changed text colors to use Indigo-800 and Blue-900 shades
3. Updated ring colors on avatar images to match the new scheme

2. Enhanced Design:

1. Added a containing card with white background (dark gray in dark mode)
2. Increased the size of avatar images for better visibility
3. Added a shadow effect to the card that changes color on hover

3. Responsiveness:

1. Maintained the responsive layout, stacking vertically on smaller screens

4. Animations and Interactions:

1. Added a fade-in animation for the entire component
2. Enhanced hover effects on avatar images (scale and z-index change)
3. Added a ring effect on hover for each avatar

5. Accessibility:

1. Maintained alt text for images
2. Ensured proper color contrast for text readability

6. Dark Mode:

1. Implemented dark mode support
2. Adjusted colors and ring effects for dark mode

7. Additional Enhancements:

1. Increased font sizes for better readability
2. Added font weight variations to emphasize important text
3. Improved spacing and alignment

This updated component maintains the original functionality while incorporating the Indigo-800 and Blue-900 color scheme and adding enhanced visual effects and interactions.

This tailwind example is contributed by nejaa badr, on 31-Oct-2024. Component is made with Tailwind CSS v3. It is responsive.

Other

Author nejaa badr

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trusted By Component</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gradient-to-r from-indigo-800 to-blue-900 min-h-screen flex items-center justify-center p-4">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-8 max-w-2xl w-full transition-all duration-300 hover:shadow-indigo-500/50 dark:hover:shadow-blue-900/50">
        <div class="flex space-x-2 items-center animate-fade-in">
            <div class="w-full">
                <div class="font-semibold text-center md:text-left text-2xl text-indigo-800 dark:text-blue-400 mb-4">Trusted by</div>
                <div class="flex space-x-4 items-center flex-col md:flex-row">
                    <div class="flex -space-x-4 overflow-hidden p-2">
                        <img class="inline-block h-12 w-12 rounded-full ring-2 ring-indigo-800 dark:ring-blue-900 hover:scale-110 transform duration-300 z-10 hover:z-30" src="https://randomuser.me/api/portraits/men/51.jpg" alt="Trusted user">
                        <img class="inline-block h-12 w-12 rounded-full ring-2 ring-indigo-800 dark:ring-blue-900 hover:scale-110 transform duration-300 z-20 hover:z-30" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Trusted user">
                        <img class="inline-block h-12 w-12 rounded-full ring-2 ring-indigo-800 dark:ring-blue-900 hover:scale-110 transform duration-300 z-30 hover:z-30" src="https://randomuser.me/api/portraits/men/34.jpg" alt="Trusted user">
                        <img class="inline-block h-12 w-12 rounded-full ring-2 ring-indigo-800 dark:ring-blue-900 hover:scale-110 transform duration-300 z-40 hover:z-30" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Trusted user">
                        <img class="inline-block h-12 w-12 rounded-full ring-2 ring-indigo-800 dark:ring-blue-900 hover:scale-110 transform duration-300 z-50 hover:z-30" src="https://randomuser.me/api/portraits/men/9.jpg" alt="Trusted user">
                        <img class="inline-block h-12 w-12 rounded-full ring-2 ring-indigo-800 dark:ring-blue-900 hover:scale-110 transform duration-300 z-60 hover:z-30" src="https://randomuser.me/api/portraits/women/9.jpg" alt="Trusted user">
                    </div>
                    <div class="text-indigo-900 dark:text-blue-300 font-medium text-lg mt-4 md:mt-0">
                        Join <span class="font-bold text-indigo-800 dark:text-blue-400">5,000+</span> other members
                    </div>
                </div>
            </div>
        </div>
    </div>

// Add hover effect to the avatar images
        const avatars = document.querySelectorAll('img');
        avatars.forEach(avatar => {
            avatar.addEventListener('mouseover', () => {
                avatar.classList.add('ring-4', 'ring-indigo-300', 'dark:ring-blue-700');
            });
            avatar.addEventListener('mouseout', () => {
                avatar.classList.remove('ring-4', 'ring-indigo-300', 'dark:ring-blue-700');
            });
        });
    </script>
</body>
</html>

Related Examples

Linear infinite brand scrolling with hover effect
Beautiful lineat brand scrolling partner with hover effect

Author:
Walid Ahmad

7 months ago

1.4k
Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

1 year ago

15.6k
Customer support chatbox
Floating chatbox

Author:
gmer33

2 years ago

10.6k
Upvote downvote buttons

Author:
Lucas Martinez

2 years ago

10.8k
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Author:
Abdul Baset Bappy

3 weeks ago

117
Typewriter effect
using javascript

Author:
Samuel Dawson

2 years ago

38.1k
Responsive layout with header, main body, aside (sidebar) and footer

Author:
Ahmed Malik

2 years ago

11.3k
Radial Progress Indicator with TailwindCSS
A sleek and customizable radial progress indicator built with SVG and styled using TailwindCSS. The progress bar is animated with smooth transitions, featuring a circular background, dynamic progress, and centered text or optional imagery. Perfect for showcasing percentages, stats, or any progress-related metrics in your projects.

Author:
SHARIFUL ISLAM

2 months ago

394
Apple Dock Navigation Bar

Author:
Cristian

3 months ago

732
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

2 years ago

8.9k
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Author:
Abdul Baset Bappy

3 weeks ago

136
Responsive fullscreen youtube video

Author:
Anonymous

1 year ago

8.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components