Home
Henrik R.
Blog post showcase minimal

Blog post showcase minimal

Forked from> @henrik/blog-post-showcase

a grid showcasing the blog posts with images and title

This tailwind example is contributed by Henrik R., on 11-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.

2.1k

Fork Fullscreen

<a class="text-lg font-semibold leading-6 text-white hover:text-teal-100" href="">
                    he Future of Artificial
                    Intelligence: Trends and Challenges
                </a>
            </article>
            <article
                class="relative flex flex-col justify-end px-4 pt-40 pb-4 overflow-hidden bg-gray-900 md:pt-28 isolate rounded-xl dark:shadow dark:shadow-gray-400/50">
                <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 object-cover w-full h-full -z-10">
                <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-xl ring-1 ring-inset ring-gray-900/10"></div>

<a class="text-lg font-semibold leading-6 text-white hover:text-teal-100" href="">
                    he Rise of Blockchain Technology:
                    A Comprehensive Guide
                </a>
            </article>
            <article
                class="relative flex flex-col justify-end px-4 pt-40 pb-4 overflow-hidden bg-gray-900 md:pt-28 isolate rounded-xl dark:shadow dark:shadow-gray-400/50">
                <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 object-cover w-full h-full -z-10">
                <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-xl ring-1 ring-inset ring-gray-900/10"></div>

<a class="text-lg font-semibold leading-6 text-white hover:text-teal-100" href="">
                    How Quantum Computing Will
                    Revolutionize Data Security
                </a>
            </article>
            <article
                class="relative flex flex-col justify-end px-4 pt-40 pb-4 overflow-hidden bg-gray-900 md:pt-28 isolate rounded-xl dark:shadow dark:shadow-gray-400/50">
                <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 object-cover w-full h-full -z-10">
                <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-xl ring-1 ring-inset ring-gray-900/10"></div>

<a class="text-lg font-semibold leading-6 text-white hover:text-teal-100" href="">
                    How Quantum Computing Will
                    Revolutionize Data Security
                </a>
            </article>
        </div>
    </div>

</div>

Related Examples

Blog Post Showcase
a grid showcasing the blog posts with images and brief descriptions

Author:
Henrik R.

10 months ago

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

52.9k
Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

23.9k
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

1 year ago

8.4k
Blog post cards
responsive blog post cards

Author:
Mr Robot

2 years ago

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

Author:
Arya

2 years ago

13.2k
Customer testimonies grid

Author:
Sameer Sultana

1 year ago

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

Author:
Ragnar lodbrok

3 months ago

538
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Author:
Abhiraj

1 month ago

452
Articles Card Grid

Author:
Noob

2 years ago

10.2k
grid card

Author:
Md. Tofayel islam

4 months ago

472
Tailwind responsive card grid

Author:
Piet Vriend

2 years ago

9.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components