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

891

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

Active Beauty Main Page

Author:
Maxim

7 months ago

1k
Feature Section
A section that allows you to share features about your product and an example of your product

Author:
Andrew Weisbeck

1 year ago

2.3k
Clickable and Responsive Card Grid
It is designed to showcase and link to various topics or content categories.

Author:
R Thapa

2 years ago

10.8k
Responsive Grid with Featured image

Author:
_Amar_

3 years ago

12.3k
Image Classification Models Response Grid
by AI Without Borders

Author:
wtfbrh

9 months ago

937
Logo grid

Author:
ariaw

2 weeks ago

44
Masonry Grid
Auto-adjusting masonry grid

Author:
Simon Scheffer

2 years ago

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

5.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

60.1k
Giftcard grid

Author:
ariaw

2 months ago

190
Customer testimonies grid

Author:
Sameer Sultana

2 years ago

20k
Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions. The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes. The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.

Author:
KULDEEP

4 months ago

761

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components