Cards - Users Card
This Users Card design includes:
1. Responsive layout using Flexbox
2. Indigo-800 and Blue-900 color scheme
3. Dark mode support
4. User list with avatars, names, and roles
5. Hover effects on user items
6. "Add Member" button
7. Card footer with team member count
8. Subtle animations and transitions
9. Accessibility considerations (proper heading structure, color contrast)
Key features:
- The background uses a gradient from Indigo-800 to Blue-900
- The 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
- User avatars have a border color that changes in dark mode
- User items have a hover effect that scales them slightly
- The "Add Member" button uses Indigo-800 with a Blue-900 hover state
- Dark mode is automatically applied based on system preferences
- The entire card fades in on load for a smooth entrance
- The card has a hover effect that enhances its shadow
This design provides a clean, professional look for displaying team members 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. It supports dark mode.
Author nejaa badr
Related Examples
-
Weather info CardInspired from Mamba UI
2 years ago11.5k -
Animated Profile CardAnimated profile card with profile completion circle
4 months ago767 -
2 months ago416 -
2 years ago18.4k -
-
2 years ago14.6k -
11 months ago1.2k -
3D Amazing Product CardHere's a stunning 3D product card with hover effects, 3D rotation, and a clean modern design using HTML, CSS (Tailwind), and a bit of JavaScript for the interactive 3D effect:
6 days ago21 -
Team Members Showcase with Portfolio BacklinkShowcase your team's talent with this beautifully designed and responsive team members grid. Each card includes the member's photo, name, role, and social links. A special portfolio backlink is included to highlight your personal contributions as a developer. Supports light and dark modes.
4 months ago689 -
Auto-Flipping 3D Profile Card with Tailwind CSSThis project showcases a 3D auto-flipping profile card built with HTML, Tailwind CSS, and vanilla JavaScript. The front side displays the user’s photo, name, and role, while the back side reveals contact information. The card flips automatically every few seconds to add a dynamic, engaging feel—perfect for portfolios or personal websites.
1 week ago12 -
2 months ago624 -
3D product CardThe product card has been fully recoded using a light (black-and-white) color theme. Let me know if you want to add more interactivity, change the layout, or adapt it for mobile or dark mode.
6 days ago19
Explore components by Tags
Didn't find component you were looking for?
Search from 2400+ components
