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.

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

1 year ago

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

59.1k
Responsive card grid
Responsive card grid for posts section

Author:
Mr Robot

2 years ago

10.8k
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:
kzsamir849

1 year ago

1.7k
Blog items skeleton

Author:
Nii Anyetei

1 year ago

2.1k
Responsive Features Section

Author:
ariaw

5 months ago

705
Responsive grid layout

Author:
gmer33

2 years ago

12.8k
Simple Footer 3

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

9 months ago

1.5k
Process Steps Grid
A structured way to present information about each step, along with corresponding icons and descriptions. Each step card is designed with a hover effect.

Author:
Computer guy

1 year ago

11.1k
Service section

Author:
inbarajan P

1 year ago

1.6k
Image Grid
The layout is designed to showcase various categories or items using images and descriptive text. Each grid item features a high-quality image and a centered text overlay with a semi-transparent background

Author:
R Thapa

1 year ago

13.7k
Tailwind CSS Blog sharing buttons with blog details
Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

Author:
Abid Ullah

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components