Articles Card Grid

This tailwind example is contributed by Noob, on 24-Jul-2022. 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 Noob

Tailwind v3.4 11.8k 14

Fork Fullscreen

<div class="flex items-center justify-center w-screen min-h-screen p-10">
    
    <div class="grid xl:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-2 max-w-6xl">
        
        <div class="flex flex-col bg-gray-200 rounded-lg p-4 m-2">
            <div class="h-40 bg-gray-400 rounded-lg"></div>
            <div class="flex flex-col items-start mt-4">
                <h4 class="text-xl font-semibold">Heading</h4>
                <p class="text-sm">Some text about the thing that goes over a few lines.</p>
                <a class="p-2 leading-none rounded font-medium mt-3 bg-gray-400 text-xs uppercase" href="#">Click
                    Here</a>
            </div>
        </div>
        
        <div class="flex flex-col bg-gray-200 rounded-lg p-4 m-2">
            <div class="h-40 bg-gray-400 rounded-lg"></div>
            <div class="flex flex-col items-start mt-4">
                <h4 class="text-xl font-semibold">Heading</h4>
                <p class="text-sm">Some text about the thing that goes over a few lines.</p>
                <a class="p-2 leading-none rounded font-medium mt-3 bg-gray-400 text-xs uppercase" href="#">Click
                    Here</a>
            </div>
        </div>
        
        <div class="flex flex-col bg-gray-200 rounded-lg p-4 m-2">
            <div class="h-40 bg-gray-400 rounded-lg"></div>
            <div class="flex flex-col items-start mt-4">
                <h4 class="text-xl font-semibold">Heading</h4>
                <p class="text-sm">Some text about the thing that goes over a few lines.</p>
                <a class="p-2 leading-none rounded font-medium mt-3 bg-gray-400 text-xs uppercase" href="#">Click
                    Here</a>
            </div>
        </div>
        
        <div class="flex flex-col bg-gray-200 rounded-lg p-4 m-2">
            <div class="h-40 bg-gray-400 rounded-lg"></div>
            <div class="flex flex-col items-start mt-4">
                <h4 class="text-xl font-semibold">Heading</h4>
                <p class="text-sm">Some text about the thing that goes over a few lines.</p>
                <a class="p-2 leading-none rounded font-medium mt-3 bg-gray-400 text-xs uppercase" href="#">Click
                    Here</a>
            </div>
        </div>
    </div>
    
</div>

Related Examples

Responsive Card Grid with images

TailwindFlex

4 years ago

21k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.7k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
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
Card grid section
Display article/blog grid

Mr Robot

3 years ago

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

Arya

3 years ago

46.2k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25k
Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Responsive Article Section

Prashant

4 years ago

17.2k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.4k
Card grid for posts

Mr Robot

3 years ago

24.1k
Responsive card grid
Responsive card grid for posts section

Mr Robot

3 years ago

12k