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

1.9k

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

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

9 months ago

1.8k
Verify OTP
verification code

Author:
gidy

8 months ago

568
Moving Background Animation

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

3.3k
Checkbox models
Tailwind Checkbox models

Author:
QQ-VVN

9 months ago

1.1k
Homepage event

Author:
Anonymous

6 months ago

636
Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

Author:
KULDEEP

7 months ago

1.1k
Background image section

Author:
Marc

2 years ago

6.5k
Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

2 years ago

17.7k
Made a sinup form
Made a sinnup form

Author:
Sufyan jutt

2 weeks ago

181
Solo leveling 2
Animation & movie field,videos,games.

Author:
ORGIN_DREAMS

8 months ago

806
Contact Page

Author:
Sedat Kumcu

1 year ago

1.6k
profil_eleve.html

Author:
Anonymous

3 months ago

265

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components