Home
Maxim
Grid (2x3)

Grid (2x3)

This tailwind example is contributed by Maxim, on 01-Apr-2025. Component is made with Tailwind CSS v3. It is responsive.

Grid

Author Maxim

893

Fork Fullscreen

<div class="container mx-auto">
    <div class="flex flex-col md:flex-row gap-4">
        
        <div class="w-full md:w-1/2 bg-blue-100">
            
            <div class="flex flex-col mb-4">
                <div class="flex flex-col md:flex-row">
                    
                    <div class="w-full md:w-1/2 p-2 bg-blue-200 mb-2 md:mb-0 md:mr-2">
                        <h3 class="font-bold">Traditie & Cultuur</h3>
                        <p>Dit is een korte tekst over Nederland. Het land staat bekend om zijn tulpen en windmolens.</p>
                    </div>

<div class="w-full md:w-1/2 p-2 bg-blue-300">
                        <h3 class="font-bold">Hoofdstad Amsterdam</h3>
                        <p>Amsterdam is de hoofdstad van Nederland. De grachten en fietspaden maken het een bijzondere plek.</p>
                    </div>
                </div>
            </div>

<div class="p-2 bg-blue-400">
                <h3 class="font-bold">Nederlandse Kazen</h3>
                <p>Nederlandse kaas is wereldberoemd. Gouda en Edam zijn twee van de meest bekende soorten die je kunt proberen.</p>
            </div>
        </div>

<div class="w-full md:w-1/2 bg-green-100">
            
            <div class="p-2 bg-green-400 mb-4">
                <h3 class="font-bold">Het Weer</h3>
                <p>Het Nederlandse klimaat is gematigd, met koele zomers en milde winters. Regen kan het hele jaar door vallen.</p>
            </div>

<div class="flex flex-col">
                <div class="flex flex-col md:flex-row">
                    
                    <div class="w-full md:w-1/2 p-2 bg-green-200 mb-2 md:mb-0 md:mr-2">
                        <h3 class="font-bold">Feestdagen</h3>
                        <p>In Nederland viert men Koningsdag op 27 april. Het hele land kleurt oranje tijdens deze feestdag.</p>
                    </div>

<div class="w-full md:w-1/2 p-2 bg-green-300">
                        <h3 class="font-bold">Nederlandse Taal</h3>
                        <p>De Nederlandse taal wordt gesproken door ongeveer 24 miljoen mensen wereldwijd, voornamelijk in Nederland en België.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Tweets showcase grid
Responsive tweets showcase grid

Author:
Freja Jensen

2 years ago

11.1k
Post Responsive Grid
Laravel News post grid

Author:
Mr Robot

3 years ago

12.5k
Responsive Card Section With Hover Effect
added more cards with ui friendly

Author:
SAI BENDE

4 months ago

483
Article List Section
A section displaying a list of articles with associated information.

Author:
Junclarkaizen Pagu

2 years ago

6.9k
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
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

1 year ago

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

8 months ago

924
Card 30/70

Author:
Maxim

8 months ago

395
Service section

Author:
inbarajan P

1 year ago

1.7k
Feature showcase cards

Author:
bara masalma

11 months ago

1.3k
Sponsors section
icon grid

Author:
Sienna

2 years ago

12.7k
Responsive products grid
Responsive product card grid using tailwind CSS.

Author:
Arya

3 years ago

44.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components