Simple Card with Image

Horizontal card

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

Tailwind v3.4 10.1k 11

<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

Profile card

Jaber Zarif

2 years ago

3k
card
glowing, tilt card

Akram Khan

1 year ago

1.3k
3D card
it is a 3D card

Bonimater

1 year ago

1.6k
Blog Card

Md. Tofayel islam

2 years ago

2.6k
Tour package card
This card could be used for featuring a product, service, or blog post:

Henrik R.

2 years ago

3.1k
Semi transparent Info card

Prajwal Hallale

3 years ago

11.2k
beautifull project page

Akram Khan

2 years ago

2.6k
Card Component
This component is a simple card (without image) component with hover effect & Dark mode Supported & full responsive

Shariar Hasan

2 years ago

4.4k
User profile card

Mr Robot

3 years ago

12k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Hamza Atig

1 year ago

2.1k
Card animate

Raul antonio de la cruz hernandez

1 year ago

2.1k
Simple card layout with image

Leon Bachmann

3 years ago

11.3k