Home
Mr Robot
Verticle card grid

Verticle card grid

Best suited for news websites

This tailwind example is contributed by Mr Robot, on 25-Nov-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

11k

Fork Fullscreen

<div class="relative w-full flex items-end justify-start text-left bg-cover bg-center"
            style="height: 450px; 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 w-full flex items-end justify-start text-left bg-cover bg-center"
            style="height: 450px; 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 w-full flex items-end justify-start text-left bg-cover bg-center"
            style="height: 450px; 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 class="relative w-full flex items-end justify-start text-left bg-cover bg-center"
            style="height: 450px; background-image:url(https://media.gettyimages.com/photos/afghan-president-ashraf-ghani-speaks-during-a-gathering-in-jalalabad-picture-id1205021905?k=6&amp;m=1205021905&amp;s=612x612&amp;w=0&amp;h=nwAH1XuZxF_H4f6LfHv-lgqtZe0h1tVFXfzhpMwFqao=);">
            <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">Afghan
                    President Ashraf Ghani Visits Jalalabad
                </a>
            </main>

</div>

</div>
</div>

Related Examples

Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Author:
Brandon D

2 years ago

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

1 year ago

47.6k
Responsive Card Grid with images

Author:
TailwindFlex

2 years ago

15.9k
Image Grid
The layout is designed to showcase various categories or items using images and descriptive text. Each grid item features a high-quality image and a centered text overlay with a semi-transparent background

Author:
R Thapa

1 year ago

11.1k
Tailwind product gallery

Author:
JaxStone

1 year ago

22.4k
Responsive Article Section

Author:
Prashant

2 years ago

12.5k
News website like card grid
fancy card grid

Author:
Mr Robot

1 year ago

11.7k
Blog post cards
responsive blog post cards

Author:
Mr Robot

1 year ago

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

Author:
Noob

2 years ago

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

Author:
Arya

2 years ago

35.6k
Card grid section
Display article/blog grid

Author:
Mr Robot

1 year ago

21.2k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

1 year ago

18.9k
Feature Showcase
The feature showcase's responsive grid can also be used as testimonial cards.

Author:
Alok

2 years ago

18.6k
Bento grids

Author:
Maxim

9 months ago

13.3k
Post Responsive Grid
Laravel News post grid

Author:
Mr Robot

2 years ago

10.5k
Masonry Grid
Auto-adjusting masonry grid

Author:
Simon Scheffer

1 year ago

26.2k
Images grid
Responsive image grid with tailwindcss.

Author:
Sienna

1 year ago

15.2k
Responsive card grid
Responsive card grid for posts section

Author:
Mr Robot

1 year ago

9.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent