Home
Mr Robot
Card with Thumbnail

Card with Thumbnail

Post card with image

This tailwind example is contributed by Mr Robot, on 20-Jul-2022. Component is made with Tailwind CSS v3.

Card

10.5k

<div class="max-w-sm mb-6 md:md-0 col-span-12 sm:col-span-6 lg:col-span-4 border p-4 rounded-lg shadow-lg">
    <a href="#">
        <img srcset="https://laravelnews.imgix.net/images/laravel9-1646792144.jpg?ixlib=php-3.3.1 1x,https://laravelnews.imgix.net/images/laravel9-1646792144.jpg?dpr=2&amp;ixlib=php-3.3.1 2x" src="https://laravelnews.imgix.net/images/laravel9-1646792144.jpg?ixlib=php-3.3.1" class="w-full mb-4 rounded-lg shadow-none transition transition-shadow duration-500 ease-in-out group-hover:shadow-lg" alt="laravel9-1646792144.jpg">
        <div class="flex items-center mb-3">
            <span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-bold leading-5 text-white font-display mr-2 capitalize bg-red-500" >
               News
            </span>
            <p class="font-mono text-xs font-normal opacity-75 text-black">September 28th, 2022</p>
        </div>
        <p class="font-display max-w-sm text-2xl font-bold leading-tight">
            <span class="link-underline link-underline-black text-black">
              Laravel 9.32 Released
            </span>
        </p>
    </a>
</div>

Related Examples

Products card grid
Example of product card grid with product image and pricing

Author:
Noob

2 years ago

21.4k
Video card
Video card component for tailwind css

Author:
Rajesh kulkarni

2 years ago

16.1k
Image card with overlay text overlay

Author:
Santos78

2 years ago

29.3k
Horizontal card with image

Author:
Amit Pachange

2 years ago

13.4k
Card animate

Author:
Raul antonio de la cruz hernandez

2 months ago

527
Info cards

Author:
Samuel Dawson

2 years ago

9.9k
Author card
Author card for giving credit to the author of the Blog/Article. It has social media icons and user image

Author:
Prajwal Hallale

1 year ago

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

Author:
Ragnar lodbrok

5 months ago

832
myCard
card with image,title,body

Author:
farisubuntu

11 months ago

1.6k
zoom in effect card
A responsive card featuring an eye-catching scenic image, designed with Tailwind CSS. This component includes hover effects for the image.

Author:
Anum Shahana

6 months ago

1.6k
Responsive Card

Author:
ᴀʀ!ᴀ

1 month ago

272
Profile card

Author:
Jaber Zarif

10 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components