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

Sticky fullpage pages / slides

Author:
Laurits

1 year ago

12.5k
Invoice
Invoice

Author:
Ameth Galarcio

4 months ago

751
nft card
nft card

Author:
5upreme505

2 weeks ago

171
Forgot Password Form
1. Color Updates: 1. Changed background to gradient `from-indigo-800 to-blue-900` 2. Updated text colors to match the new theme 3. Changed button colors to `bg-indigo-800` with `hover:bg-blue-900` 4. Updated focus rings to use indigo colors 5. Made footer links white with indigo hover states 2. Enhanced Styling: 1. Added gradient background 2. Improved border radius to `rounded-xl` 3. Enhanced shadow with `shadow-2xl` 4. Added hover scale effects 5. Added fade-in animation 3. Dark Mode Improvements: 1. Enhanced dark mode colors 2. Added system preference detection 3. Improved dark mode contrast 4. Updated dark mode focus rings 4. Added Functionality: 1. Added form validation 2. Added success message 3. Added form reset after submission 4. Added smooth transitions 5. Accessibility Improvements: 1. Maintained ARIA attributes 2. Enhanced focus states 3. Improved color contrast 4. Added transition animations for better UX 6. Added Interactions: 1. Hover effects on all interactive elements 2. Scale animation on card and button hover 3. Smooth color transitions 4. Form validation feedback The form now matches the Indigo-800 and Blue-900 color scheme while maintaining dark mode support and adding enhanced animations and interactions.

Author:
nejaa badr

1 week ago

17
Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

1 year ago

14k
Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

1 year ago

13.7k
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, 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) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - 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 This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

Author:
nejaa badr

5 days ago

39
Icon group

Author:
Conan Hilton

1 year ago

8.7k
Popover
basic popover example

Author:
Dipti narayan

1 year ago

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

5 days ago

58
Checkbox
Checkbox

Author:
Aman kumar

4 months ago

466
Your upside-down text

Author:
Isabella Kowalski

1 year ago

11.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent