Gradient card
This tailwind example is contributed by TailwindFlex, on 01-Mar-2023. Component is made with Tailwind CSS v3. It is responsive.
Author TailwindFlex
Related Examples
-
1 year ago24.8k
-
1 year ago19.4k -
Info Cardinfo card with description
2 years ago10.9k -
zoom in effect cardA responsive card featuring an eye-catching scenic image, designed with Tailwind CSS. This component includes hover effects for the image.
2 months ago662 -
google ui cardsgoogle ui cards
1 year ago8.1k -
1 year ago7.6k -
Cards - Users CardThis 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.
1 month ago331 -
myCardcard with image,title,body
6 months ago951 -
Card with ThumbnailPost card with image
2 years ago9.7k -
1 year ago19.5k -
Labs cardLab item list card
1 month ago462 -
Profile Card
Show more details on hover
1 year ago11.9k
Explore components by Tags
Didn't find component you were looking for?
Search from 1800+ components
