72

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

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

25.8k
Tailwind image card with text above it

Author:
I.P. Leroy

1 year ago

18.3k
Product card

Author:
Simon Scheffer

1 year ago

24.4k
Glowing gradient button
Button on black background

Author:
Leon Bachmann

1 year ago

28.9k
Hover effect card

Author:
Samuel Dawson

1 year ago

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

Author:
Livia Flores

1 year ago

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

Author:
Noob

2 years ago

18.5k
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:
jdherron1

1 year ago

14.1k
IMDB score and votes box

Author:
Darius G

1 year ago

7.4k
Author card
Author card for giving credit to the author of the Blog/Article. It has social media icons and user image

Author:
Prajwal Hallale

1 year ago

6.7k
Botton hover
On hover Changes text

Author:
davilaarroyo07

8 months ago

3.8k
Animated cards

Author:
Michael Andreuzza

6 months ago

3k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent

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