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.5k

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

1 year ago

26.7k
Tailwind image card with text above it

Author:
I.P. Leroy

1 year ago

19.4k
Product card

Author:
Simon Scheffer

1 year ago

25.4k
Glowing gradient button
Button on black background

Author:
Leon Bachmann

1 year ago

30.3k
Hover effect card

Author:
Samuel Dawson

1 year ago

24.8k
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.7k
Products card grid
Example of product card grid with product image and pricing

Author:
Noob

2 years ago

19.1k
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.7k
IMDB score and votes box

Author:
Darius G

1 year ago

7.6k
Image cards

Author:
Reuben Enahoro

3 weeks ago

274
Minimal Testimonial Card

Author:
Amit Pachange

1 year ago

7.6k
Buttons in pair

Author:
Amit Pachange

1 year ago

9.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ 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

© 2024 TailwindFlex. All Rights Reserved.

v1.9