Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!-- Mobile-first column that becomes a row on md+ --> <div class="flex flex-col md:flex-row gap-4"> <div class="flex-1 bg-blue-50 p-4 rounded-lg">Left panel</div> <div class="flex-1 bg-green-50 p-4 rounded-lg">Right panel</div> </div> <!-- Responsive grid: 1 col → 2 cols → 3 cols → 4 cols --> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> <div class="bg-white rounded-xl shadow p-4">Card 1</div> <div class="bg-white rounded-xl shadow p-4">Card 2</div> <div class="bg-white rounded-xl shadow p-4">Card 3</div> <div class="bg-white rounded-xl shadow p-4">Card 4</div> </div> <!-- Responsive text sizes --> <h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold"> Responsive Heading </h1> <!-- Hide / show at breakpoints --> <nav class="hidden md:flex gap-6">Desktop nav links</nav> <button class="md:hidden p-2">☰ Mobile menu</button> <!-- Responsive padding and max-width container pattern --> <main class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> Page content </main> <!-- max-* variants (Tailwind v3.2+): apply only below breakpoint --> <div class="max-md:text-center md:text-left"> Centered on mobile, left-aligned on tablet+ </div>
Result
Open