Home
Prem..
Simple Card with Image

Simple Card with Image

Horizontal card

This tailwind example is contributed by Prem.., on 04-Sep-2022. Component is made with Tailwind CSS v3.

Card

8.7k

<div class="flex flex-col max-w-md m-12">
  <div class="flex flex-col sm:flex-row border border-gray-700 py-1 px-1 w-full text-center sm:text-left">
    <div class="flex-shrink-0  m-4 w-16 h-16 rounded-full bg-gray-400 self-center"></div>
    <div class="flex flex-col py-2 pr-2">
      <h4 class="text-lg font-light">Hello World</h4>
      <p class="text-sm font-hairline">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed porro, mollitia soluta, dignissimos labore ab magni temporibus sequi maiores.</p>
    </div>
  </div>
  <br>
  <div class="flex flex-col rounded-full sm:flex-row border border-gray-700 py-1 px-1 w-full text-center sm:text-left">
    <div class="flex-shrink-0  m-4 w-16 h-16 rounded-full bg-gray-400 self-center"></div>
    <div class="flex flex-col py-2 pr-2">
      <h4 class="text-lg font-light">Hello World</h4>
      <p class="text-sm font-hairline">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed porro, mollitia soluta, dignissimos labore ab magni temporibus sequi maiores.</p>
    </div>
  </div>
</div>

Related Examples

Coupon code card
Display Special Offer with Coupon Code

Author:
Dipti narayan

1 year ago

10.3k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

4 months ago

785
Card section
Card section. find it makecomponents.com

Author:
makecomponents

9 months ago

1k
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

Author:
irahoza daniel

3 weeks ago

38
Card-Product
Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

Author:
Ameth Galarcio

10 months ago

2k
Responsive Grid with Featured image

Author:
_Amar_

2 years ago

11.8k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

4 months ago

973
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

1 year ago

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

Author:
makecomponents

9 months ago

1.6k
Showcase Card

Author:
Jaber Zarif

11 months ago

1.7k
Information card

Author:
Samuel Dawson

2 years ago

11.6k
nextjs-profile-card-tailwind

Author:
Tailwind Free Snippets

8 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components