Home
Mr Robot
Short and simple card grid

Short and simple card grid

Best suited for news websites

This tailwind example is contributed by Mr Robot, on 29-Dec-2022. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Article Card, Blog page card, Article card

Grid Blog Card

Author Mr Robot

11.7k

Fork Fullscreen

<div class="relative h-64 w-full flex items-end justify-start text-left bg-cover bg-center"
            style="background-image:url(https://media.gettyimages.com/photos/at-the-the-network-tolo-televised-debate-dr-abdullah-abdullah-with-picture-id1179614034?k=6&amp;m=1179614034&amp;s=612x612&amp;w=0&amp;h=WwIX3RMsOQEn5DovD9J3e859CZTdxbHHD3HRyrgU3A8=);">
            <div class="absolute top-0 mt-20 right-0 bottom-0 left-0 bg-gradient-to-b from-transparent to-gray-900">
            </div>
            <div class="absolute top-0 right-0 left-0 mx-5 mt-2 flex justify-between items-center">
                <a href="#"
                    class="text-xs bg-indigo-600 text-white px-5 py-2 uppercase hover:bg-white hover:text-indigo-600 transition ease-in-out duration-500">Politics</a>
                <div class="text-white font-regular flex flex-col justify-start">
                    <span class="text-3xl leading-0 font-semibold">25</span>
                    <span class="-mt-3">May</span>
                </div>
            </div>
            <main class="p-5 z-10">
                <a href="#"
                    class="text-md tracking-tight font-medium leading-7 font-regular text-white hover:underline">Dr.
                    Abdullah Abdullah's Presidential Election Campaign
                </a>
            </main>

</div>

<div class="relative h-64 w-full flex items-end justify-start text-left bg-cover bg-center"
            style="background-image:url(https://media.gettyimages.com/photos/ashraf-ghani-afghanistans-president-speaks-at-the-council-on-foreign-picture-id850794338?k=6&amp;m=850794338&amp;s=612x612&amp;w=0&amp;h=b_XBw5S38Cioslqr6VL3e36cWQU205IsInqDXZpDOD4=);">
            <div class="absolute top-0 mt-20 right-0 bottom-0 left-0 bg-gradient-to-b from-transparent to-gray-900">
            </div>
            <div class="absolute top-0 right-0 left-0 mx-5 mt-2 flex justify-between items-center">
                <a href="#"
                    class="text-xs bg-indigo-600 text-white px-5 py-2 uppercase hover:bg-white hover:text-indigo-600 transition ease-in-out duration-500">Politics</a>
                <div class="text-white font-regular flex flex-col justify-start">
                    <span class="text-3xl leading-0 font-semibold">10</span>
                    <span class="-mt-3">Mar</span>
                </div>
            </div>
            <main class="p-5 z-10">
                <a href="#"
                    class="text-md tracking-tight font-medium leading-7 font-regular text-white hover:underline">Afghanistan's
                    President Ashraf Ghani Speaks At The Council
                </a>
            </main>

</div>

<div class="relative h-64 w-full flex items-end justify-start text-left bg-cover bg-center"
            style="background-image:url(https://media.gettyimages.com/photos/afghan-president-ashraf-ghani-arrives-to-the-welcoming-ceremony-the-picture-id694155252?k=6&amp;m=694155252&amp;s=612x612&amp;w=0&amp;h=IIJPetzJL-hAgPkE4hm2wUKvO4YOav8jJp484CgLEUs=);">
            <div class="absolute top-0 mt-20 right-0 bottom-0 left-0 bg-gradient-to-b from-transparent to-gray-900">
            </div>
            <div class="absolute top-0 right-0 left-0 mx-5 mt-2 flex justify-between items-center">
                <a href="#"
                    class="text-xs bg-indigo-600 text-white px-5 py-2 uppercase hover:bg-white hover:text-indigo-600 transition ease-in-out duration-500">Politics</a>
                <div class="text-white font-regular flex flex-col justify-start">
                    <span class="text-3xl leading-0 font-semibold">20</span>
                    <span class="-mt-3">Jan</span>
                </div>
            </div>
            <main class="p-5 z-10">
                <a href="#"
                    class="text-md tracking-tight font-medium leading-7 font-regular text-white hover:underline">Middle
                    East Participants Gather In Warsaw
                </a>
            </main>

</div>

</div>
</div>

Related Examples

Card grid for posts

Author:
Mr Robot

3 years ago

23k
Tailwind image gallery
Responsive grid with evenly spaced image cards. Each card has a title label at the bottom, and there's a subtle hover effect for interactive engagement.

Author:
Alok

3 years ago

61.1k
404 Error Page
Minimal 404 for your project

Author:
TailwindFlex

3 years ago

22.2k
Responsive products grid
Responsive product card grid using tailwind CSS.

Author:
Arya

3 years ago

44.9k
Responsive card grid
Responsive card grid for posts section

Author:
Mr Robot

3 years ago

11.5k
Responsive Card Grid with images

Author:
TailwindFlex

3 years ago

20k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

3 years ago

24.4k
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

11 months ago

1.9k
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Author:
Nikita

2 years ago

5.4k
Responsive data cards

Author:
EliteAI Tools

1 year ago

1.7k
Kids E-learning Platform Card
Kids E-learning Platform Card Clone

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

1.8k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

10 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components