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

11.8k

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

Author:
Mr Robot

2 years ago

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

57.1k
Customer testimonies grid

Author:
Sameer Sultana

2 years ago

18.6k
Tailwind responsive card grid

Author:
Piet Vriend

2 years ago

10.2k
Verticle card grid
Best suited for news websites

Author:
Mr Robot

2 years ago

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

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

Author:
Abhijit Sen

2 years ago

22.7k
Game Character Cards
Simple game character cards selection

Author:
Diavox Jerome Soriano

4 months ago

833
Products card grid
Example of product card grid with product image and pricing

Author:
Noob

2 years ago

22.1k
Data Metrics Showcase
An information panel designed to instill trust, presenting vital statistics about a service or product. The grid layout offers a clean and organized look for displaying key data.

Author:
Hyun-woo Cho

1 year ago

8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components