Home
Henrik R.
Blog Post Showcase

Blog Post Showcase

a grid showcasing the blog posts with images and brief descriptions

This tailwind example is contributed by Henrik R., on 10-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Article Card, Blog page card, Article card

Grid Blog Card

Author Henrik R.

4.3k

Fork Fullscreen

<div class="mx-auto max-w-7xl px-6 lg:px-8 pt-8">
        <div class="mx-auto max-w-2xl text-center">
            <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">From The Blog</h2>
            <p class="mt-2 text-lg leading-8 text-gray-600 dark:text-gray-300">
                Dive into the latest in technology with our insightful blog posts.
            </p>
        </div>
        <div
            class="mx-auto mt-8 grid max-w-2xl auto-rows-fr grid-cols-1 gap-8 sm:mt-12 lg:mx-0 lg:max-w-none lg:grid-cols-3 ">
            
            <article
                class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-900 dark:bg-gray-700 px-8 py-8 pb-8 pt-80 sm:pt-48 lg:pt-80">
                <img src="https://images.unsplash.com/photo-1677442135703-1787eea5ce01?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxhaXxlbnwwfDB8fHwxNzEyNzUzMTQ4fDA&ixlib=rb-4.0.3&q=80&w=1080" alt="" class="absolute inset-0 -z-10 h-full w-full object-cover">
                <div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
                <div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
                <div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300"><time
                        datetime="2023-10-11" class="mr-8">Oct 11, 2023</time>
                    <div class="-ml-4 flex items-center gap-x-4"><svg viewBox="0 0 2 2"
                            class="-ml-0.5 h-0.5 w-0.5 flex-none fill-white/50">
                            <circle cx="1" cy="1" r="1"></circle>
                        </svg>
                        <div class="flex gap-x-2.5">
                            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="" class="h-6 w-6 flex-none rounded-full bg-white/10">John
                        </div>
                    </div>
                </div>
                <h3 class="mt-3 text-lg font-semibold leading-6 text-white">
                    <a href="/tech-blog/post1"><span class="absolute inset-0"></span>The Future of Artificial
                        Intelligence: Trends and Challenges</a>
                </h3>
            </article>
            
            <article
                class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-900 dark:bg-gray-700 px-8 py-8 pb-8 pt-80 sm:pt-48 lg:pt-80">
                <img src="https://images.unsplash.com/photo-1639322537228-f710d846310a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxibG9jayUyMGNoYWlufGVufDB8MHx8fDE3MTI3NTMxNjd8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="" class="absolute inset-0 -z-10 h-full w-full object-cover">
                <div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
                <div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
                <div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300"><time
                        datetime="2023-09-25" class="mr-8">Sept 25, 2023</time>
                    <div class="-ml-4 flex items-center gap-x-4"><svg viewBox="0 0 2 2"
                            class="-ml-0.5 h-0.5 w-0.5 flex-none fill-white/50">
                            <circle cx="1" cy="1" r="1"></circle>
                        </svg>
                        <div class="flex gap-x-2.5">
                            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="" class="h-6 w-6 flex-none rounded-full bg-white/10">Jane
                        </div>
                    </div>
                </div>
                <h3 class="mt-3 text-lg font-semibold leading-6 text-white">
                    <a href="/tech-blog/post2"><span class="absolute inset-0"></span>The Rise of Blockchain Technology:
                        A Comprehensive Guide</a>
                </h3>
            </article>
            
            <article
                class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-900 dark:bg-gray-700 px-8 py-8 pb-8 pt-80 sm:pt-48 lg:pt-80">
                <img src="https://images.unsplash.com/photo-1666112835156-c65bb806ac73?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxNXx8cXVhbnR1bSUyMGNvbXB1dGluZ3xlbnwwfDB8fHwxNzEyNzUzMTk2fDA&ixlib=rb-4.0.3&q=80&w=1080" alt="" class="absolute inset-0 -z-10 h-full w-full object-cover">
                <div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
                <div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
                <div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300"><time
                        datetime="2023-09-24" class="mr-8">Sept 24, 2023</time>
                    <div class="-ml-4 flex items-center gap-x-4"><svg viewBox="0 0 2 2"
                            class="-ml-0.5 h-0.5 w-0.5 flex-none fill-white/50">
                            <circle cx="1" cy="1" r="1"></circle>
                        </svg>
                        <div class="flex gap-x-2.5">
                            <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="" class="h-6 w-6 flex-none rounded-full bg-white/10">Michael
                        </div>
                    </div>
                </div>
                <h3 class="mt-3 text-lg font-semibold leading-6 text-white">
                    <a href="/tech-blog/post3"><span class="absolute inset-0"></span>How Quantum Computing Will
                        Revolutionize Data Security</a>
                </h3>
            </article>
            
        </div>
    </div>

</div>

Related Examples

Responsive card grid
Responsive card grid for posts section

Author:
Mr Robot

2 years ago

11.1k
Blog post showcase minimal
a grid showcasing the blog posts with images and title

Author:
Henrik R.

1 year ago

3.6k
Card grid for posts

Author:
Mr Robot

2 years ago

22.6k
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

8 months ago

1k
Brand Grid with Hover Effect

Author:
ariaw

9 months ago

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

Author:
Prajwal Hallale

2 years ago

6.1k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

8 months ago

1.1k
Testimonial Section
A responsive, SEO-friendly testimonial section for Ab Nahid Agency clients

Author:
Abdul Jabbar Al Nahid

5 months ago

459
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

1 year ago

1.5k
Grid
Grid Grid-Cards

Author:
sardorazimov2901

1 year ago

2k
Customer testimonies grid

Author:
Sameer Sultana

2 years ago

20.2k
Table CRUD
CRUD TABLE DESIGN

Author:
Abhiraj

10 months ago

3.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components