Post Responsive Grid

Laravel News post grid

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

Tailwind v3.4 13.2k 15

<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

Mr Robot

3 years ago

15.1k
Responsive card grid
Responsive card grid for posts section

Mr Robot

3 years ago

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

Alok

3 years ago

62.4k
Customer testimonies grid

Sameer Sultana

3 years ago

21.3k
Tailwind responsive card grid

Piet Vriend

3 years ago

11.9k
Verticle card grid
Best suited for news websites

Mr Robot

3 years ago

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

R Thapa

3 years ago

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

Amit Pachange

4 years ago

53.9k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25.2k
Responsive Features Section

ariaw

1 year ago

1.7k
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Ragnar lodbrok

1 year ago

2.3k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Hamza Atig

1 year ago

2.2k