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

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

Testimonial card

Author:
Leon Bachmann

2 years ago

11.7k
Pricing Table

Author:
Akshay

3 years ago

10.6k
Amazing E-commerce card
An amazing e-commerce card with stunning hover effect

Author:
Robert Chunga

9 months ago

2.2k
Landing page

Author:
Maxim

5 months ago

1.4k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

23.5k
Game Live Score
A live score game layout design perfect for your live scoring application

Author:
Diavox Jerome Soriano

7 months ago

312
card
glowing, tilt card

Author:
Akram Khan

3 months ago

242
Brand Grid with Hover Effect

Author:
ariaw

5 months ago

887
Responsive Working Process Section
This modern and responsive "Our Working Process" section adapts seamlessly to all screen sizes, ensuring a smooth user experience. The design follows a structured step-by-step layout with clear typography, bold colors, and interactive elements, making it perfect for showcasing business processes or workflows.

Author:
ABDO-SY

5 months ago

676
split bg 2

Author:
Anonymous

3 months ago

66
Shop Now Amazon x
Product cards

Author:
ORGIN_DREAMS

3 months ago

799
Shoping Cart Popup

Author:
ABDO-SY

6 months ago

858

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components