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

<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

22.2k
Video card
Video card component for tailwind css

Author:
Rajesh kulkarni

2 years ago

16.4k
Image card with overlay text overlay

Author:
Santos78

2 years ago

30.1k
User Profile Card
Useful for testimonials and reviews section

Author:
Abhijit Sen

2 years ago

10.1k
Card Component Simple
This is a Card Component for simple use &full responsive

Author:
Shariar Hasan

1 year ago

2.1k
Best incamas to date

Author:
ORGIN_DREAMS

1 month ago

110
Product card for eCommerce website

Author:
Steven Kuhn

2 years ago

12k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

Author:
threehymns

1 year ago

17.2k
Product Card

Author:
Maxim

3 months ago

969
card
card

Author:
5upreme505

8 months ago

944
Hello Acode Master! 👋
is a passionate software developer based in Rubavu. He considers himself the top developer in the area and is committed to solving real-world problems through technology.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

209
Experience Card
Experience card section you can use for portfolio or other profiles.

Author:
Khalid

1 year ago

2.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components