Home
Anonymous
Article Card

Article Card

This tailwind example is contributed by Anonymous, on 01-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Card

Author Anonymous

2.4k

Fork Fullscreen

<div
    class="flex flex-col sm:flex-row sm:max-w-2xl max-w-xs mx-auto overflow-hidden bg-gray-700 rounded-lg shadow-lg dark:bg-gray-800 p-2">
    <div class="p-2 sm:w-1/2">
        <img class="rounded object-cover w-full sm:h-80 h-60" src="https://i.pinimg.com/564x/41/c7/52/41c75274ffa14f3222691c0cbe3c1904.jpg" alt="Article" />
    </div>
    <div class="sm:p-4 p-2 sm:w-1/2 flex flex-col justify-between">
        <div>
            <a href="#"
                class="block sm:mt-2 text-2xl font-semibold text-gray-50 dark:text-white hover:text-gray-600 hover:underline">Lorem
                rem facere</a>
            <p class="mt-2 text-sm text-gray-200 dark:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing
                elit. Tenetur labore, cum rem facere obcaecati beatae sunt numquam architecto delectus dignissimos
                explicabo quod pariatur at consequatur sint esse aut Facere. <br> Numquam architecto delectus dignissimos
            </p>
        </div>

<div class="mt-4">
            <div class="flex items-center">
                <div class="flex items-center">
                    <img class="object-cover h-10 w-10 rounded-full" src="https://i.pinimg.com/564x/1d/1e/16/1d1e16ad5227a9c726b61bd7cc4eca33.jpg" alt="Avatar" />
                    <a href="#" class="mx-2 font-semibold text-gray-50 dark:text-gray-200">Tocino Code</a>
                </div>
                <span class="mx-1 text-xs text-gray-400 dark:text-gray-300">21 SEP 2015</span>
                <span class="hover:cursor-pointer relative sm:left-12 text-xs text-gray-400 dark:text-gray-300"
          >
          <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#f2f2f2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="18" cy="5" r="3"></circle>
            <circle cx="6" cy="12" r="3"></circle>
            <circle cx="18" cy="19" r="3"></circle>
            <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
            <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
            </svg
        >
        </span>
            </div>
        </div>
    </div>
</div>

Related Examples

Highlights - Speakers Section

Author:
ABDO-SY

6 months ago

612
Travel Landing Page: Australia

Author:
Maxim

7 months ago

1.7k
alert
html , css

Author:
Hacker Development

5 months ago

885
Product card

Author:
Simon Scheffer

2 years ago

30.3k
Patient card

Author:
Anonymous

1 year ago

1.7k
3D Amazing Product Card
Here's a stunning 3D product card with hover effects, 3D rotation, and a clean modern design using HTML, CSS (Tailwind), and a bit of JavaScript for the interactive 3D effect:

Author:
Nicole Shalom

5 months ago

866
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

Author:
dev-fab250

5 months ago

468
Confirmation modal/card

Author:
Sophia Baker

2 years ago

15.3k
Labs card
Lab item list card

Author:
Sedat Kumcu

1 year ago

1.6k
cards
cards with background animation

Author:
Anonymous

2 years ago

11.3k
Giftcard grid

Author:
ariaw

1 month ago

150
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

3 years ago

51.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components