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

Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

8 months ago

593
Info cards for admin panel

Author:
Sophia Baker

2 years ago

12.1k
Responsive Feature Card

Author:
Gopi Yadav

3 years ago

13.3k
home
html , css

Author:
Hacker Development

7 months ago

1.7k
Profile Card
User Profile Card with Name and Location

Author:
Anubhav Ranjan

1 year ago

2.3k
About us card

Author:
Sienna

2 years ago

11.7k
item - product card

Author:
ABDO-SY

9 months ago

859
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

3 months ago

362
Tailwind image card with text above it

Author:
I.P. Leroy

2 years ago

25k
Best incamas to date

Author:
ORGIN_DREAMS

7 months ago

873
google ui cards
google ui cards

Author:
Anonymous

2 years ago

9.8k
Pricing section Lima
Pricing section Lima with responsive design

Author:
Mubashir hussain

1 year ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components