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.5k

<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

Article Card

Author:
Anonymous

1 year ago

1.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

2.3k
Pricing section Lima
Pricing section Lima with responsive design

Author:
Mubashir hussain

1 year ago

1.8k
Trending Users
Tailwind Flex Trending Users Card Design

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

11 months ago

3k
Otp-code template
This is an OTP code template that contains the one-time password, which can be sent to the user's email either when they are signing up for the first time or for multi-factor authentication (MFA) during the login process.

Author:
anandu ap

6 months ago

1k
Team Section

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

5 months ago

1.4k
Card with link
This example can be used to show a CTA as a link instead of a button inside the card.

Author:
Md. Tofayel islam

1 year ago

1.8k
Animated cards with Tailwind CSS

Author:
Michael Andreuzza

11 months ago

9.1k
Blog post cards
responsive blog post cards

Author:
Mr Robot

2 years ago

11k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

1 week ago

15
Showcase Card

Author:
Jaber Zarif

9 months ago

1.7k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

2 years ago

9.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components