Monkey card

First tailwind example

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

Card

Author muhittin budak

Tailwind v3.4 1.6k 2

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

Info Card
Information card with image

Brandon D

4 years ago

10.5k
Services
Card Services Section. find it makecomponents.com

makecomponents

2 years ago

2.7k
Tailwind Animated Login Form
A modern Tailwind CSS animated login form featuring smooth transitions, premium UI styling, responsive layout, and interactive input effects. Designed for admin panels, SaaS dashboards, and secure web applications, this login template delivers a clean light-theme interface with professional animations and a high-end user experience.

shrenik khule

8 months ago

1k
Features

Michael Andreuzza

2 years ago

5.7k
Grid
Grid Grid-Cards

sardorazimov2901

2 years ago

2.4k
payement cart virtual
payement cart virtual

Omer fils ELENGA

7 months ago

472
Pokemon!
Cool Pokemon card!

Crimson

1 year ago

2.1k
home
html , css

Hacker Development

1 year ago

2.4k
Team section
beautiful responsive our team section

Rajesh Maheshwari

1 year ago

2k
Website Pricing List Card Component
A Website Pricing List Card Component is a reusable UI element that displays pricing plans or packages on a website, typically for SaaS products, subscriptions, or service tiers. It helps users easily compare different pricing options and choose the best one.

dev-fab250

1 year ago

2k
Shopping Cart -Card

ABDO-SY

1 year ago

2.7k
Portfolio form
Portfolio form

Joseph Melvin Kanu

2 years ago

3.5k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.