Responsive Article Section

This tailwind example is contributed by Prashant, on 01-Aug-2022. Component is made with Tailwind v3.4. similar terms for this example are Article Card, Blog page card, Article card

Card Grid Blog Card

Author Prashant

Tailwind v3.4 17.2k 19

Fork Fullscreen

<section class="flex flex-col justify-center max-w-6xl min-h-screen px-4 py-10 mx-auto sm:px-6">
    <div class="flex flex-wrap items-center justify-between mb-8">
        <h2 class="mr-10 text-4xl font-bold leading-none md:text-5xl">
            Continually Scale Results
        </h2>
        <a href="#"
            class="block pb-1 mt-2 text-base font-black text-blue-600 uppercase border-b border-transparent hover:border-blue-600">
            Go to insights ->
        </a>
    </div>

<div class="flex flex-wrap -mx-4">
        <div class="w-full max-w-full mb-8 sm:w-1/2 px-4 lg:w-1/3 flex flex-col">
            <img src="https://source.unsplash.com/Lki74Jj7H-U/400x300" alt="Card img" class="object-cover object-center w-full h-48" />
            <div class="flex flex-grow">
                <div class="triangle"></div>
                <div class="flex flex-col justify-between px-4 py-6 bg-white border border-gray-400 text">
                    <div>
                        <a href="#"
                            class="inline-block mb-4 text-xs font-bold capitalize border-b-2 border-blue-600 hover:text-blue-600">Reliable
                            Schemas</a>
                        <a href="#"
                            class="block mb-4 text-2xl font-black leading-tight hover:underline hover:text-blue-600">
                            What Zombies Can Teach You About Food
                        </a>
                        <p class="mb-4">
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla delectus corporis commodi
                            aperiam, amet cupiditate?
                        </p>
                    </div>
                    <div>
                        <a href="#"
                            class="inline-block pb-1 mt-2 text-base font-black text-blue-600 uppercase border-b border-transparent hover:border-blue-600">Read
                            More -></a>
                    </div>
                </div>
            </div>
        </div>

<div class="w-full max-w-full mb-8 sm:w-1/2 px-4 lg:w-1/3 flex flex-col">
            <img
            src="https://source.unsplash.com/L9_6GOv40_E/400x300"
            alt="Card img"
            class="object-cover object-center w-full h-48"
          />
            <div class="flex flex-grow">
                <div class="triangle"></div>
                <div class="flex flex-col justify-between px-4 py-6 bg-white border border-gray-400">
                    <div>
                        <a href="#"
                            class="inline-block mb-4 text-xs font-bold capitalize border-b-2 border-blue-600 hover:text-blue-600">Client-based
                            Adoption</a>
                        <a href="#"
                            class="block mb-4 text-2xl font-black leading-tight hover:underline hover:text-blue-600">
                            Old School Art
                        </a>
                        <p class="mb-4">
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla delectus.
                        </p>
                    </div>
                    <div>
                        <a href="#"
                            class="inline-block pb-1 mt-2 text-base font-black text-blue-600 uppercase border-b border-transparent hover:border-blue-600">Read
                            More -></a>
                    </div>
                </div>
            </div>
        </div>

<div class="w-full max-w-full mb-8 sm:w-1/2 px-4 lg:w-1/3 flex flex-col">
            <img
            src="https://source.unsplash.com/7JX0-bfiuxQ/400x300"
            alt="Card img"
            class="object-cover object-center w-full h-48"
          />
            <div class="flex flex-grow">
                <div class="triangle"></div>
                <div class="flex flex-col justify-between px-4 py-6 bg-white border border-gray-400">
                    <div>
                        <a href="#"
                            class="inline-block mb-4 text-xs font-bold capitalize border-b-2 border-blue-600 hover:text-blue-600">Intellectual
                            Capital</a>
                        <a href="#"
                            class="block mb-4 text-2xl font-black leading-tight hover:underline hover:text-blue-600">
                            5 Things To Do About Rain
                        </a>
                        <p class="mb-4">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, neque. Eius, ea possimus.
                        </p>
                    </div>
                    <div>
                        <a href="#"
                            class="inline-block pb-1 mt-2 text-base font-black text-blue-600 uppercase border-b border-transparent hover:border-blue-600">Read
                            More -></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Related Examples

Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.2k
Tailwind image slider
slider with navigation buttons and info about image

Anonymous

2 years ago

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

Arya

3 years ago

46.2k
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 card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Responsive Card Grid with images

TailwindFlex

4 years ago

21k
Verticle card grid
Best suited for news websites

Mr Robot

3 years ago

14.3k
Card grid for posts

Mr Robot

3 years ago

24.1k
Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
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
Masonry Grid
Auto-adjusting masonry grid

Simon Scheffer

3 years ago

32.8k
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 image grid
tailwind picture grid

Anonymous

2 years ago

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

threehymns

2 years ago

20.1k
Feature / Icon grid
Present information in a clear and organized manner with icons.

Arya

3 years ago

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

Noob

3 years ago

24.8k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.4k