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

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

Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Author:
Abdul Baset Bappy

2 months ago

544
Admin dashboard cards
Card groups for showing stats/info. Change it for responsiveness for small and medium screen

Author:
RShubham kumar

1 year ago

3.7k
Pricing card
Reveal details on hover

Author:
Anonymous

1 year ago

3.3k
Sign up form

Author:
Rajesh Maheshwari

3 months ago

399
Card-Product
Item or card to show products

Author:
Ameth Galarcio

1 year ago

3.1k
Elevated feature card

Author:
magersa

1 year ago

3.7k
Tailwind AoPS Demo
Starter code for an interactive Tailwind Demo

Author:
Joseph Barron

1 year ago

3.3k
Blog Author Card

Author:
EliteAI Tools

5 months ago

847
Greeting Card with CTA
card with two actions with greeting msg according to time

Author:
Amit Pachange

1 year ago

7.2k
Shopping Cart -Card

Author:
ABDO-SY

3 months ago

747
Event notification card

Author:
Odessa Young

2 years ago

9.1k
Logos cards

Author:
Maxim

5 months ago

744

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components