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

894

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 Feature Card

Author:
Gopi Yadav

3 years ago

13.3k
Blog items skeleton

Author:
Nii Anyetei

1 year ago

2.4k
Content showing for Call to action

Author:
inbarajan P

1 year ago

1.9k
Bento grids

Author:
Maxim

1 year ago

21.2k
img grid layout
here is image grid layout

Author:
nahid hasan

8 months ago

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

7 months ago

1k
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Author:
Abhiraj

11 months ago

1.9k
Logo grid

Author:
ariaw

1 month ago

142
Articles Card Grid

Author:
Noob

3 years ago

11k
Features section
Showcase your key features

Author:
Manon Daniel

2 years ago

16.5k
Responsive landscape cards

Author:
Piet Vriend

2 years ago

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

976

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components