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

930

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

Responsive Light Mode Footer Component
This is a fully responsive and reusable light-mode footer component designed by ABNahid Agency. Built with a clean structure and optimized for modern web applications, this footer features essential sections, including About, Services, Contact, and Social Links. Ideal for personal portfolios, business websites, or startup platforms—plug and play in your React or HTML project.

Author:
Abdul Jabbar Al Nahid

7 months ago

588
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Author:
Nikita

2 years ago

5.4k
Card KPI
Targetas ahora con un grafico

Author:
Raul antonio de la cruz hernandez

3 months ago

676
Information cards for admin panal
Stats cards

Author:
Brandon D

3 years ago

10.8k
Tailwind responsive features card grid
with gradient background

Author:
Kofi Osei

2 years ago

11.4k
News website like card grid
fancy card grid

Author:
Mr Robot

3 years ago

14.3k
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
Bento grids

Author:
Maxim

2 years ago

21.9k
Articles Card Grid

Author:
Noob

3 years ago

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

Author:
Junclarkaizen Pagu

2 years ago

7.3k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

3 years ago

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

Author:
Arya

3 years ago

44.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components