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

Avtar Cards
this is cards, for the profile section

Author:
pablitodgb

7 months ago

398
Profile Card
Show more details on hover

Author:
Tamani Phiri

2 years ago

14.6k
Payment Cards

Author:
Shammi Nethupul

1 year ago

2.5k
Profile Card
Modern Profile card with Subtle overlay on image, minimal and clean approach with emphasis on readability and hierarchy.

Author:
UI-Templates

3 months ago

511
Profile Card
User profile card

Author:
Ajay Thakur

3 months ago

108
Twitter tweet clone
Replica of twitter tweet card

Author:
Sophia Baker

3 years ago

10k
Expandable Card
An expandable card using tailwind + alpine to show additional information when it is open

Author:
farid

3 months ago

384
Showcase Card

Author:
Jaber Zarif

1 year ago

2.6k
Products Layout
An ecommerce store front product list layout

Author:
Developer Kwame

4 months ago

515
medical care
It will help us get medical care quickly using a card and make it possible for all of us, Rwandans and other people in other countries, to have a better life.

Author:
Nishimwe Jeanine

8 months ago

394
Beautiful post cards

Author:
Matej Kovač

1 year ago

2.9k
Spinner with card
Use this animated loading indicator when content inside of a card is still loading.

Author:
Md. Tofayel islam

1 year ago

3.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components