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

15.9k

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

23.3k
Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

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

Author:
Anonymous

1 year ago

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

Author:
Arya

2 years ago

42.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

6k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

2 years ago

15.1k
Responsive Card Grid with images

Author:
TailwindFlex

2 years ago

18.9k
Verticle card grid
Best suited for news websites

Author:
Mr Robot

2 years ago

13k
Card grid for posts

Author:
Mr Robot

2 years ago

21.5k
Responsive Grid with Featured image

Author:
_Amar_

3 years ago

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

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

58.7k
Masonry Grid
Auto-adjusting masonry grid

Author:
Simon Scheffer

2 years ago

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

17.9k
Tailwind image grid
tailwind picture grid

Author:
Anonymous

1 year ago

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

Author:
Arya

2 years ago

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

Author:
Noob

2 years ago

22.7k
Blog post cards
responsive blog post cards

Author:
Mr Robot

2 years ago

11.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components