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

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

3 years ago

23.8k
Video card
Video card component for tailwind css

Author:
Rajesh kulkarni

2 years ago

17.5k
Image card with overlay text overlay

Author:
Santos78

2 years ago

31.8k
card profie
profile card

Author:
Aman kumar

1 year ago

4.1k
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

8 months ago

1k
Minimal Profile card

Author:
Abhijit Sen

2 years ago

11.6k
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

6 months ago

820
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1.1k
Sign up form

Author:
Rajesh Maheshwari

9 months ago

958
Hotel rooms
A simple room overview

Author:
Matti

11 months ago

1.5k
Profile card

Author:
Mr Robot

2 years ago

12.7k
Tailwind CSS Blog Card

Author:
Morris Muriuki Muthigani

5 months ago

299

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components