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
-
Responsive 3-Tier Pricing Card SectionA clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.
4 days ago18 -
1 year ago1.9k -
User Profile Sidebar MenuA clean and modern user profile sidebar menu built with TailwindCSS. This component displays a user’s profile picture, name, and a vertical navigation menu with links such as Dashboard, Order History, Account Details, Address, Reviews, and Logout. Ideal for account dashboards in web applications, the design features rounded corners, subtle shadows, and interactive hover effects, delivering a smooth and user-friendly experience.
1 month ago315 -
Contact us form with mapContact us form with map
1 year ago10.6k -
1 week ago19 -
6 months ago721 -
YouTube Community Post UI MockupA static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.
6 days ago20 -
2 years ago10.9k -
3 months ago365 -
CONTACT US - GET IN TOUCH - PORTFOLIOResponsive "Contact us" section, dark-mode-friendly contact area featuring stylish cards with icons displaying essential contact details.
2 months ago422 -
Gridaient Card Information Sectiona card in neon design
7 months ago1.3k -
Signup And Signin pageSignup And Signin page with tab controller
9 months ago2k
Explore components by Tags
Didn't find component you were looking for?
Search from 2100+ components
