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

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

Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

Author:
ABDO-SY

1 year ago

2.6k
Horizon Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN

Author:
Alif Bima Pradana

2 months ago

392
Featured Items

Author:
Abdul Baset Bappy

10 months ago

1.1k
Card
travel place card hover effect card

Author:
nahid hasan

1 year ago

2.3k
Brand Grid with Hover Effect

Author:
ariaw

1 year ago

1.7k
Logo grid

Author:
ariaw

6 months ago

456
Masonry Grid
Auto-adjusting masonry grid

Author:
Simon Scheffer

3 years ago

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

Author:
Hamza Atig

1 year ago

1.6k
Posts / Articles card grid
Present a collection of articles or blog posts in a grid format with their respective featured images

Author:
Prajwal Hallale

2 years ago

6.2k
Responsive Features Section

Author:
ariaw

1 year ago

1.1k
Tailwind responsive features card grid
with gradient background

Author:
Kofi Osei

3 years ago

11.5k
Product grid

Author:
ariaw

6 months ago

560

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components