Home
muhittin budak
Monkey card

Monkey card

First tailwind example

This tailwind example is contributed by muhittin budak, on 11-Apr-2025. Component is made with Tailwind CSS v3. It is responsive.

Card

Author muhittin budak

918

1

Fork Fullscreen

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait">
<div class="max-w-sm rounded overflow-hidden shadow-lg" style="font-family: 'Strait', sans-serif;">
  <img class="w-full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJ5hSkM1pGC5I_gTNx-Bmpyb0QrwWm-TwiARKclttVPrZrIKfr0bTHyP0afaIHL7zks-AbODA7zAf9LYhKdKVM6s2YXB8jkFl-fWBTmse2y6O68grQjw6tOOMrtdsG1qkVOwRT05R5XVZIoRoJFsn_wUqkrABJwEGZN0Q0OZlLZxis2zkhOH2u1RI_dNd/s518/colobus.jpg" alt="Sunset in the mountains">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Monkey</div>
    <p class="text-gray-700 text-base">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
    </p>
    <br>
    <a target="_blank" href="https://bootsnipp.com/muhittinbudak" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded">
  Bootstrap 3 examples 
</a>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#winter</span>
  </div>
</div>

Related Examples

Card with link
This example can be used to show a CTA as a link instead of a button inside the card.

Author:
Md. Tofayel islam

1 year ago

2.5k
Card-Product
Item or card to show products

Author:
Ameth Galarcio

1 year ago

4k
section card

Author:
Raul antonio de la cruz hernandez

1 month ago

228
Fancy blog post card

Author:
Mr Robot

2 years ago

12.7k
Card Product
Card Product for List Product

Author:
Ronny Camacho

1 month ago

9
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

1 year ago

1.9k
Card
Jobs recommended for you LinkedIn Clone

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

10 months ago

1.1k
Tailwind card with gradient border

Author:
Elijah Davis

2 years ago

15.9k
Futuristic 3D Tilt Card
Hover to see the 3D effect

Author:
Anonymous

11 months ago

1.4k
Product review card

Author:
Rama krishnan Subramanian

1 year ago

2.2k
Responsive Projects Section

Author:
ariaw

10 months ago

1k
card
card section. find it makecomponents.com

Author:
makecomponents

1 year ago

2k

Explore components by Tags

Didn't find component you were looking for?

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

© 2026 TailwindFlex. All Rights Reserved.

v1.12