Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!-- Mobile-first responsive layout --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <!-- Stacks on mobile, 2 cols on tablet, 3 on desktop --> <div class="bg-white rounded-xl p-4 shadow">Card 1</div> <div class="bg-white rounded-xl p-4 shadow">Card 2</div> <div class="bg-white rounded-xl p-4 shadow">Card 3</div> </div> <!-- Responsive text sizing --> <h1 class="text-2xl md:text-4xl lg:text-5xl font-bold"> Responsive Heading </h1> <!-- Show/hide at breakpoints --> <nav class="hidden md:flex gap-4">Desktop nav links</nav> <button class="md:hidden">☰ Mobile Menu</button> <!-- Responsive padding --> <section class="px-4 py-8 md:px-8 lg:px-16 lg:py-16"> Content with responsive spacing </section>
Result
Open