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

Author:
Abhijit Sen

2 years ago

22.8k
Work Showcase Cards
Highlight your top projects or products with these cards, featuring images and brief descriptions. This example has a subtle hover effect.

Author:
Computer guy

1 year ago

11.3k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

2 months ago

330
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

1 year ago

9.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components