Card

Card with Likes and download Button

This tailwind example is contributed by Mrunal Solkar, on 03-Sep-2023. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Card Button

Author Mrunal Solkar

8.4k

Fork Fullscreen

</button>
      <button class="download">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15M9 12l3 3m0 0l3-3m-3 3V2.25" />
</svg>

</button>
    </div>
  </div>

</div>

Related Examples

Image card with overlay text overlay

Author:
Santos78

1 year ago

26.5k
Tailwind image card with text above it

Author:
I.P. Leroy

1 year ago

19.1k
Product card

Author:
Simon Scheffer

1 year ago

25.1k
Glowing gradient button
Button on black background

Author:
Leon Bachmann

1 year ago

30k
Hover effect card

Author:
Samuel Dawson

1 year ago

24.6k
Floating buttons examples
Bottom-Right Corner, Bottom-Left Corner, Top-Left Corner, Top-Right Corner, Center, Bottom-Center

Author:
Livia Flores

1 year ago

20.5k
Products card grid
Example of product card grid with product image and pricing

Author:
Noob

2 years ago

19k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

Author:
threehymns

1 year ago

14.6k
IMDB score and votes box

Author:
Darius G

1 year ago

7.5k
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

1 month ago

238
Info cards for admin panal

Author:
Sophia Baker

1 year ago

8.5k
Image card

Author:
Laurits

1 year ago

14.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ componenent