Home
nejaa badr
Avatar

Avatar

This Avatar component includes:

1. Responsive design using Tailwind CSS classes
2. Indigo-800 and Blue-900 color scheme
3. Dark mode support
4. User avatar with hover effect and online status indicator
5. User name and role
6. Follow button with hover effect
7. Follower count
8. Subtle animations and transitions
9. Accessibility considerations (proper contrast, focus states)

Key features:

- The background uses a gradient from Indigo-800 to Blue-900
- The avatar card has a white background in light mode and dark gray in dark mode
- Text colors are adjusted for readability in both light and dark modes
- The avatar image has a border color that changes in dark mode
- The avatar has a scale effect on hover and a ring appears around it
- The Follow button uses Indigo-800 with a Blue-900 hover state
- The card has a shadow effect that changes color on hover
- Dark mode is automatically applied based on system preferences
- The entire card has a subtle transition effect for smooth color changes
- Proper focus states are implemented for the button

This design provides a clean, interactive avatar component while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

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

Avatar

Author nejaa badr

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">
    <title>Avatar 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-sm w-full transition-all duration-300 hover:shadow-indigo-500/50 dark:hover:shadow-blue-900/50">
        <div class="flex items-center space-x-4">
            <div class="relative">
                <img 
                    src="https://i.pravatar.cc/100?img=3" 
                    alt="User Avatar" 
                    class="w-16 h-16 rounded-full object-cover border-2 border-indigo-800 dark:border-blue-900 transition-transform duration-300 hover:scale-110"
                >
                <span class="absolute bottom-0 right-0 w-4 h-4 bg-green-500 border-2 border-white dark:border-gray-800 rounded-full"></span>
            </div>
            <div>
                <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Jane Doe</h2>
                <p class="text-indigo-800 dark:text-blue-400">Product Designer</p>
            </div>
        </div>
        <div class="mt-4 flex justify-between items-center">
            <button class="bg-indigo-800 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded-full transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
                Follow
            </button>
            <div class="text-gray-600 dark:text-gray-300 text-sm">
                <span class="font-semibold">1.2k</span> Followers
            </div>
        </div>
    </div>

// Add hover effect to the avatar
        const avatar = document.querySelector('img');
        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

User Avatars

Author:
Sophia Baker

2 years ago

10.6k
Divine Shree Ram Hero Section | Tailwind CSS Responsive UI for Devotional |Hero section |Hero
Explore a stunning and responsive Hero Section dedicated to Lord Ram, crafted with Tailwind CSS. Perfect for spiritual brands, Ramayana-inspired products, or devotional e-commerce platforms. Fully responsive, dark mode compatible, and animation-rich UI.

Author:
Rajesh Pandey

1 month ago

157
Ripple Animation

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

2 months ago

899
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

1 month ago

367
Chat UI
The Chat UI is a responsive and interactive component designed for building messaging interfaces. Ideal for applications like customer support, social media, or team collaboration tools, it provides a modern, user-friendly layout for real-time communication.

Author:
Abhiraj

5 months ago

1.4k
Avatar group

Author:
Laurits

2 years ago

9.2k
CTA block
with user avatars and 2 buttons

Author:
Carla Hoffman

1 year ago

1.9k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

4 months ago

1.1k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

8 months ago

2.9k
User avatar group

Author:
JaxStone

2 years ago

14.2k
Flex Profile
Tailwind Flex User Profile

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

1 year ago

4.2k
User list
User list

Author:
Anonymous

3 weeks ago

68

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components