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
-
Animated Pizza Menu GridA beautiful, interactive pizza product grid featuring smooth 360-degree rotation animations on hover. This free open-source component includes automatic dark mode support, responsive design (mobile, tablet, desktop), and an elegant "Add to Cart" button reveal effect. Built with HTML and Tailwind CSS - no dependencies required. Ideal for restaurant websites, food delivery platforms, e-commerce stores, or any product showcase needing eye-catching interactivity.
4 months ago785 -
Simple Card with ImageHorizontal card
3 years ago9.5k -
Feature Showcase + CardsResponsive section with cards aligned using grid layout.
1 year ago2.5k -
Service/Product cardTour trip booking showcase card
3 years ago13.1k -
CardCard Layout in Tailwind as React Compoment
1 year ago1.2k -
3D Modern Pricing CardHere's a modern, reusable Pricing Card component that's highly popular on platforms like TailwindFlex. It's clean, responsive, and designed for conversions.
9 months ago809 -
11 months ago1k -
11 months ago1.1k -
1 year ago2.9k -
A product card with size selectorUsing alpine it shows a size selector when clicking in cart
1 year ago1.4k -
Tailwind css banner offerBold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.
6 months ago615 -
cardcard simple hover
1 month ago102
Explore components by Tags
Didn't find component you were looking for?
Search from 3000+ components
