Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!-- Fixed sizes: useful for icons, avatars, buttons --> <img src="avatar.jpg" alt="" class="w-10 h-10 rounded-full object-cover" /> <!-- Tailwind v3.4+ shorthand: --> <img src="avatar.jpg" alt="" class="size-10 rounded-full object-cover" /> <!-- Fractional widths in flex layout --> <div class="flex gap-4"> <div class="w-1/3 bg-blue-50 p-4 rounded">One third</div> <div class="w-2/3 bg-blue-100 p-4 rounded">Two thirds</div> </div> <!-- Max-width for readable content --> <p class="max-w-prose text-gray-700 leading-7"> The max-w-prose utility sets max-width: 65ch — the classic measure for readable line length. Perfect for body text. </p> <!-- Container pattern with max-width breakpoints --> <div class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> Page content </div> <!-- Full-height layouts --> <div class="flex flex-col min-h-screen"> <header class="h-16 bg-white shadow shrink-0">Header</header> <main class="flex-1 bg-gray-50 p-6">Grows to fill space</main> <footer class="h-12 bg-gray-800 text-white shrink-0">Footer</footer> </div> <!-- Scrollable side panel with max-height --> <aside class="w-64 max-h-[calc(100vh-4rem)] overflow-y-auto sticky top-16"> Scrollable sidebar content </aside>
Result
Open