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

9.2k

<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

grid card

Author:
Md. Tofayel islam

1 year ago

1.7k
cards
cards with background animation

Author:
Anonymous

1 year ago

3.1k
Dynamic Google Card

Author:
Cristian

10 months ago

1.1k
Info cards

Author:
Samuel Dawson

2 years ago

11k
Profile1

Author:
pablitodgb

6 months ago

359
Showcase Card

Author:
Jaber Zarif

1 year ago

2.6k
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

11 months ago

2.1k
Material 3 Cards [Light]
Cards that conform to Google's Material 3 design guidelines and themes

Author:
Nick Girga

7 months ago

664
3d card
the Best 3D card with tailwind css

Author:
irahoza daniel

7 months ago

482
Product / Service Card
Example of a card that can be used as a blog, product, or service card with reviews.

Author:
Noob

3 years ago

17.7k
3D card
it is a 3D card

Author:
Bonimater

7 months ago

849
Tailwind flex Hero
Show Image with flex image gallery

Author:
Riaz Uddin Masum

2 days ago

16

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components