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.5k

<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.9k
Responsive card grid
Responsive card grid for posts section

Author:
Mr Robot

2 years ago

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

60.4k
Customer testimonies grid

Author:
Sameer Sultana

2 years ago

20.1k
Tailwind responsive card grid

Author:
Piet Vriend

2 years ago

10.8k
Verticle card grid
Best suited for news websites

Author:
Mr Robot

3 years ago

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

2 years ago

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

3 years ago

51.8k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

23.9k
Modern Contact Section with Responsive Grid and Glassmorphic Form
A clean, professional contact section with a dual-column layout featuring contact details and a sleek glassmorphism-inspired form. Fully responsive with Tailwind CSS, supporting both light and dark modes.

Author:
Muhammad Umair Arshad

4 months ago

574
Luxurious Grid Gallery

Author:
UI-Templates

1 month ago

91
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

11 months ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components