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

Author box

Author:
Mr Robot

2 years ago

11.5k
Animated cards

Author:
Michael Andreuzza

1 year ago

6.1k
Testimonials

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

4 months ago

1.1k
Basic US Flag Card
Here's a set of card components styled with Tailwind CSS that represent various US-themed elements:

Author:
Uwase Alliance

2 months ago

260
Call to action card with image
Responsive card with image

Author:
Noah Schmidt

2 years ago

15.6k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

3 months ago

340
home
html , css

Author:
Hacker Development

3 months ago

968
IMDB score and votes box

Author:
Darius G

2 years ago

8.4k
Article card

Author:
Sienna

2 years ago

12.3k
GitHub For you Feed
GitHub For you Feed Clone

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

9 months ago

2k
Profile Card
Responsive modern profile card

Author:
Rajesh Maheshwari

5 months ago

528
Card with Dark Mode
For blog post and e-commerce websites

Author:
OmKar Mehta

1 year ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components