Home
Mr Robot
Post Responsive Grid

Post Responsive Grid

Laravel News post grid

This tailwind example is contributed by Mr Robot, on 29-Aug-2022. Component is made with Tailwind CSS v3.

Grid

12.2k

<li class="mb-6 md:md-0 col-span-12 sm:col-span-6 lg:col-span-4">
            <a href="#" >
                <img srcset="https://laravelnews.imgix.net/images/laravel9-1646792144.jpg?ixlib=php-3.3.1 1x,https://laravelnews.imgix.net/images/laravel9-1646792144.jpg?dpr=2&amp;ixlib=php-3.3.1 2x" src="https://laravelnews.imgix.net/images/laravel9-1646792144.jpg?ixlib=php-3.3.1" class="w-full mb-4 rounded-lg shadow-none transition transition-shadow duration-500 ease-in-out group-hover:shadow-lg" alt="laravel9-1646792144.jpg">
                <div class="flex items-center mb-3">
                    <span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-bold leading-5 text-white font-display mr-2 capitalize bg-red-500" >
                        News
                    </span>
                    <p class="font-mono text-xs font-normal opacity-75 text-black">September 28th, 2022</p>
                </div>
                <p class="font-display max-w-sm text-2xl font-bold leading-tight">
                    <span class="link-underline link-underline-black text-black">
                        Laravel 9.32 Released
                    </span>
                </p>
            </a>
        </li>

<li class="mb-6 md:md-0 col-span-12 sm:col-span-6 lg:col-span-4">
            <a href="">
                <img srcset="https://laravelnews.imgix.net/images/laravel-notification-event-subscriber-package2.jpg?ixlib=php-3.3.1 1x,https://laravelnews.imgix.net/images/laravel-notification-event-subscriber-package2.jpg?dpr=2&amp;ixlib=php-3.3.1 2x" src="https://laravelnews.imgix.net/images/laravel-notification-event-subscriber-package2.jpg?ixlib=php-3.3.1" class="w-full mb-4 rounded-lg shadow-none transition transition-shadow duration-500 ease-in-out group-hover:shadow-lg" alt="laravel-notification-event-subscriber-package2.jpg">
                <div class="flex items-center mb-3">
                    <span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-bold leading-5 text-white font-display mr-2 capitalize bg-red-500" >
                        Packages
                    </span>
                    <p class="font-mono text-xs font-normal opacity-75 text-black">September 27th, 2022</p>
                </div>
                <p class="font-display max-w-sm text-2xl font-bold leading-tight">
                    <span class="link-underline link-underline-black text-black">
                        Laravel Notification Event Subscriber Package
                    </span>
                </p>
            </a>
        </li>

<li class="mb-6 md:md-0 col-span-12 sm:col-span-6 lg:col-span-4">
            <a href="">
                <img srcset="https://laravelnews.imgix.net/images/otp.png?ixlib=php-3.3.1 1x,https://laravelnews.imgix.net/images/otp.png?dpr=2&amp;ixlib=php-3.3.1 2x" src="https://laravelnews.imgix.net/images/otp.png?ixlib=php-3.3.1" class="w-full mb-4 rounded-lg shadow-none transition transition-shadow duration-500 ease-in-out group-hover:shadow-lg" alt="otp.png">
                <div class="flex items-center mb-3">
                    <span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-bold leading-5 text-white font-display mr-2 capitalize bg-red-500" >
                        Tutorials
                    </span>
                    <p class="font-mono text-xs font-normal opacity-75 text-black">September 23rd, 2022</p>
                </div>
                <p class="font-display max-w-sm text-2xl font-bold leading-tight">
                    <span class="link-underline link-underline-black text-black">
                        Simple one-time password authentication in Laravel
                    </span>
                </p>
            </a>
        </li>

<li class="mb-6 md:md-0 col-span-12 sm:col-span-6 lg:col-span-4">
            <a href="">
                <img srcset="https://laravelnews.imgix.net/images/laravel-scout-featured.png?ixlib=php-3.3.1 1x,https://laravelnews.imgix.net/images/laravel-scout-featured.png?dpr=2&amp;ixlib=php-3.3.1 2x" src="https://laravelnews.imgix.net/images/laravel-scout-featured.png?ixlib=php-3.3.1" class="w-full mb-4 rounded-lg shadow-none transition transition-shadow duration-500 ease-in-out group-hover:shadow-lg" alt="laravel-scout-featured.png">
                <div class="flex items-center mb-3">
                    <p class="font-mono text-xs font-normal opacity-75 text-black">September 22nd, 2022</p>
                </div>
                <p class="font-display max-w-sm text-2xl font-bold leading-tight">
                    <span class="link-underline link-underline-black text-black">
                     Meilitools offers advanced Meilisearch index features in Laravel Scout
                    </span>
                </p>
            </a>
        </li>

<li class="mb-6 md:md-0 col-span-12 sm:col-span-6 lg:col-span-4">
            <a href="#">
                <img srcset="https://laravelnews.imgix.net/images/livewire-v3.jpg?ixlib=php-3.3.1 1x,https://laravelnews.imgix.net/images/livewire-v3.jpg?dpr=2&amp;ixlib=php-3.3.1 2x" src="https://laravelnews.imgix.net/images/livewire-v3.jpg?ixlib=php-3.3.1" class="w-full mb-4 rounded-lg shadow-none transition transition-shadow duration-500 ease-in-out group-hover:shadow-lg" alt="livewire-v3.jpg">
                <div class="flex items-center mb-3">
                    <span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-bold leading-5 text-white font-display mr-2 capitalize bg-red-500" style="background-color: ">
                        News
                    </span>
                    <p class="font-mono text-xs font-normal opacity-75 text-black">September 21st, 2022</p>
                </div>
                <p class="font-display max-w-sm text-2xl font-bold leading-tight">
                    <span class="link-underline link-underline-black text-black">
                        Upcoming Livewire v3 Features and Changes
                    </span>
                </p>
            </a>
        </li>

<li class="mb-6 md:md-0 col-span-12 sm:col-span-6 lg:col-span-4">
            <a href="#">
                <img srcset="https://laravelnews.imgix.net/images/laravel9-1646792144.jpg?ixlib=php-3.3.1 1x,https://laravelnews.imgix.net/images/laravel9-1646792144.jpg?dpr=2&amp;ixlib=php-3.3.1 2x" src="https://laravelnews.imgix.net/images/laravel9-1646792144.jpg?ixlib=php-3.3.1" class="w-full mb-4 rounded-lg shadow-none transition transition-shadow duration-500 ease-in-out group-hover:shadow-lg" alt="laravel9-1646792144.jpg">
                <div class="flex items-center mb-3">
                    <span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-bold leading-5 text-white font-display mr-2 capitalize bg-red-500" style="background-color: ">
                        News
                    </span>
                    <p class="font-mono text-xs font-normal opacity-75 text-black">September 21st, 2022</p>
                </div>
                <p class="font-display max-w-sm text-2xl font-bold leading-tight">
                    <span class="link-underline link-underline-black text-black">
                        Laravel 9.31 Released
                    </span>
                </p>
            </a>
        </li>

</ul>
</div>

Related Examples

News website like card grid
fancy card grid

Author:
Mr Robot

2 years ago

13.5k
Responsive card grid
Responsive card grid for posts section

Author:
Mr Robot

2 years ago

10.8k
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.6k
Customer testimonies grid

Author:
Sameer Sultana

2 years ago

19.4k
Tailwind responsive card grid

Author:
Piet Vriend

2 years ago

10.5k
Verticle card grid
Best suited for news websites

Author:
Mr Robot

2 years ago

12.9k
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
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.5k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

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

4 months ago

545
Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

27.3k
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Author:
Muhammad Umair Arshad

1 week ago

129

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components