Home
Prashant
Responsive Article Section

Responsive Article Section

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

Card Grid Blog Card

Author Prashant

14.1k

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

Author:
Abhijit Sen

2 years ago

21.7k
Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

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

Author:
Anonymous

1 year ago

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

Author:
Arya

2 years ago

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

Author:
Prajwal Hallale

1 year ago

5.8k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

2 years ago

13.8k
Responsive Card Grid with images

Author:
TailwindFlex

2 years ago

17.4k
Verticle card grid
Best suited for news websites

Author:
Mr Robot

2 years ago

12.1k
Card grid for posts

Author:
Mr Robot

2 years ago

19.4k
Responsive Grid with Featured image

Author:
_Amar_

2 years ago

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

Author:
Amit Pachange

2 years ago

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

2 years ago

54.2k
Masonry Grid
Auto-adjusting masonry grid

Author:
Simon Scheffer

2 years ago

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

Author:
threehymns

1 year ago

16.2k
Tailwind image grid
tailwind picture grid

Author:
Anonymous

1 year ago

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

Author:
Arya

2 years ago

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

Author:
Noob

2 years ago

21k
Blog post cards
responsive blog post cards

Author:
Mr Robot

2 years ago

10.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components