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 v3.4. It is responsive. It supports dark mode.
Related Examples
-
Profile CardSimple and Attractive Profile card in tailwind css
1.1k -
-
Responsive Features SectionIt's a Handy Ready to Use Responsive Features or Services Component with Dark Mode
6.1k -
14.5k -
Admin dashboard cardsCard groups for showing stats/info.
22.4k -
Profile CardModern Profile card with Subtle overlay on image, minimal and clean approach with emphasis on readability and hierarchy.
1.5k -
Responsive Card GridTailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.
53.9k -
Website Pricing List Card ComponentWebsite Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.
1.7k -
Login FormA modern Tailwind CSS animated login form featuring smooth transitions, premium UI styling, responsive layout, and interactive input effects. Designed for admin panels, SaaS dashboards, and secure web applications, this login template delivers a clean light-theme interface with professional animations and a high-end user experience.
763 -
Clean Image Grid GalleryA clean and balanced image gallery arranged in equal-sized columns for a simple, organized presentation.
245 -
Product card for e-commerceA responsive product card for e-commerce, displaying product image, country flag, volume, name, and price, with hover effects and a clean layout.
2.2k -
CONTACT US - GET IN TOUCH - PORTFOLIOResponsive "Contact us" section, dark-mode-friendly contact area featuring stylish cards with icons displaying essential contact details.
2.5k
Browse by topic
Explore components by Tags
Jump straight to the UI pattern you need.
Can't find it?
Didn't find the component you were looking for?
Search across 3,000+ community-built components and grab the code in seconds.