92

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

9.3k

10

Fork Fullscreen

<div>
  <div class="card">
    <img src="https://images.pexels.com/photos/16645682/pexels-photo-16645682/free-photo-of-close-up-of-green-leaves.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" alt="" />
    <div class="button-grp">
      <button class="likes">
          <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="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
</svg>

</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

2 years ago

28.3k
Tailwind image card with text above it

Author:
I.P. Leroy

1 year ago

21k
Product card

Author:
Simon Scheffer

2 years ago

27.2k
Glowing gradient button
Button on black background

Author:
Leon Bachmann

2 years ago

32.9k
Hover effect card

Author:
Samuel Dawson

2 years ago

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

Author:
Livia Flores

1 year ago

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

Author:
Noob

2 years ago

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

15.7k
IMDB score and votes box

Author:
Darius G

1 year ago

7.9k
Clickable and Responsive Card Grid
It is designed to showcase and link to various topics or content categories.

Author:
R Thapa

1 year ago

9.2k
Pricing card
Reveal details on hover

Author:
Anonymous

10 months ago

2.4k
Battery and signal
Battery and signal bar component

Author:
ardianhu

1 month ago

253

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1