Responsive card with image

Related Examples

• 
  Card grid for blog Posts / Articles

  Author:
  Abhijit Sen

  2 years ago

  23.6k
• 
  Card with image full width

  This component is a card designed for showcasing featured blog posts. It includes the post title, a captivating image, category links, and author details.

  Author:
  Mr Robot

  2 years ago

  13.4k
• 
  Horizontal card with image

  Author:
  Amit Pachange

  3 years ago

  14.3k
• 
  Customer testimonial card

  Responsive user testimonial card with image

  Author:
  Arya

  2 years ago

  11.7k
• 
  Tailwind image card with text above it

  Author:
  I.P. Leroy

  2 years ago

  24.3k
• 
  Service/Product card

  Tour trip booking showcase card

  Author:
  JaxStone

  2 years ago

  12.7k
• 
  Responsive Card Grid

  Tailwind 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.

  Author:
  Amit Pachange

  3 years ago

  51.3k
• 
  User Profile Card

  The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

  Author:
  Prashant

  3 years ago

  62.8k
• 
  Call to action card with image

  Responsive card with image

  Author:
  Noah Schmidt

  2 years ago

  15.9k
• 
  Pricing section Lima

  Pricing section Lima with responsive design

  Author:
  Mubashir hussain

  1 year ago

  2.3k
• 
  Form

  form

  Author:
  Aman kumar

  1 year ago

  1.8k
• 
  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.

  Author:
  nejaa badr

  11 months ago

  2k