News website like card grid

fancy card grid

This tailwind example is contributed by Mr Robot, on 03-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Article Card, Blog page card, Article card

Grid Blog Card

Author Mr Robot

Tailwind v3.4 15k 17

Fork Fullscreen

<div class="sm:col-span-5">
            <a href="#">
                <div class="bg-cover text-center overflow-hidden"
                    style="min-height: 300px; background-image: url('https://api.time.com/wp-content/uploads/2020/07/never-trumpers-2020-election-01.jpg?quality=85&amp;w=1201&amp;h=676&amp;crop=1')"
                    title="Woman holding a mug">
                </div>
            </a>
            <div
                class="mt-3 bg-white rounded-b lg:rounded-b-none lg:rounded-r flex flex-col justify-between leading-normal">
                <div class="">
                    <a href="#"
                        class="text-xs text-indigo-600 uppercase font-medium hover:text-gray-900 transition duration-500 ease-in-out">
                        Election
                    </a>
                    <a href="#"
                        class="block text-gray-900 font-bold text-2xl mb-2 hover:text-indigo-600 transition duration-500 ease-in-out">Revenge
                        of the Never Trumpers</a>
                    <p class="text-gray-700 text-base mt-2">Meet the Republican dissidents fighting to push Donald Trump
                        out of office—and reclaim their party</p>
                </div>
            </div>
        </div>

<div class="sm:col-span-7 grid grid-cols-2 lg:grid-cols-3 gap-5">
            <div class="">
                <a href="#">
                    <div class="h-40 bg-cover text-center overflow-hidden"
                        style="background-image: url('https://api.time.com/wp-content/uploads/2020/07/president-trump-coronavirus-election.jpg?quality=85&amp;w=364&amp;h=204&amp;crop=1')"
                        title="Woman holding a mug">
                    </div>
                </a>
                <a href="#"
                    class="text-gray-900 inline-block font-semibold text-md my-2 hover:text-indigo-600 transition duration-500 ease-in-out">Trump
                    Steps Back Into Coronavirus Spotlight</a>
            </div>
            <div class="">
                <a href="#">
                    <div class="h-40 bg-cover text-center overflow-hidden"
                        style="background-image: url('https://api.time.com/wp-content/uploads/2020/06/GettyImages-1222922545.jpg?quality=85&amp;w=364&amp;h=204&amp;crop=1')"
                        title="Woman holding a mug">
                    </div>
                </a>
                <a href="#"
                    class="text-gray-900 inline-block font-semibold text-md my-2 hover:text-indigo-600 transition duration-500 ease-in-out">How
                    Trump's Mistakes Became Biden's Big Breaks</a>
            </div>
            <div class="">
                <a href="#">
                    <div class="h-40 bg-cover text-center overflow-hidden"
                        style="background-image: url('https://api.time.com/wp-content/uploads/2020/07/American-Flag.jpg?quality=85&amp;w=364&amp;h=204&amp;crop=1')"
                        title="Woman holding a mug">
                    </div>
                </a>
                <a href="#"
                    class="text-gray-900 inline-block font-semibold text-md my-2 hover:text-indigo-600 transition duration-500 ease-in-out">Survey:
                    Many Americans 'Dissatisfied' With U.S.</a>
            </div>
            <div class="">
                <a href="#">
                    <div class="h-40 bg-cover text-center overflow-hidden"
                        style="background-image: url('https://api.time.com/wp-content/uploads/2020/06/GettyImages-1222922545.jpg?quality=85&amp;w=364&amp;h=204&amp;crop=1')"
                        title="Woman holding a mug">
                    </div>
                </a>
                <a href="#"
                    class="text-gray-900 inline-block font-semibold text-md my-2 hover:text-indigo-600 transition duration-500 ease-in-out">How
                    Trump's Mistakes Became Biden's Big Breaks</a>
            </div>
            <div class="">
                <a href="#">
                    <div class="h-40 bg-cover text-center overflow-hidden"
                        style="background-image: url('https://api.time.com/wp-content/uploads/2020/07/American-Flag.jpg?quality=85&amp;w=364&amp;h=204&amp;crop=1')"
                        title="Woman holding a mug">
                    </div>
                </a>
                <a href="#"
                    class="text-gray-900 inline-block font-semibold text-md my-2 hover:text-indigo-600 transition duration-500 ease-in-out">Survey:
                    Many Americans 'Dissatisfied' With U.S.</a>
            </div>
            <div class="">
                <a href="#">
                    <div class="h-40 bg-cover text-center overflow-hidden"
                        style="background-image: url('https://api.time.com/wp-content/uploads/2020/07/president-trump-coronavirus-election.jpg?quality=85&amp;w=364&amp;h=204&amp;crop=1')"
                        title="Woman holding a mug">
                    </div>
                </a>
                <a href="#"
                    class="text-gray-900 inline-block font-semibold text-md my-2 hover:text-indigo-600 transition duration-500 ease-in-out">Trump
                    Steps Back Into Coronavirus Spotlight</a>
            </div>
        </div>

</div>
</div>

Related Examples

Responsive card grid
Responsive card grid for posts section

Mr Robot

3 years ago

12k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25k
Verticle card grid
Best suited for news websites

Mr Robot

3 years ago

14.3k
Responsive grid layout

Kofi Osei

3 years ago

22.9k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.2k
Post Responsive Grid
Laravel News post grid

Mr Robot

4 years ago

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

Arya

3 years ago

46.2k
Customer testimonies grid

Sameer Sultana

3 years ago

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

Alok

3 years ago

62.3k
Tailwind responsive card grid

Piet Vriend

3 years ago

11.9k
Posts / Articles card grid
Present a collection of articles or blog posts in a grid format with their respective featured images

Prajwal Hallale

2 years ago

6.2k
Responsive Grid with Featured image

_Amar_

4 years ago

13.2k