Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!-- Spacing: m-{size}, p-{size} (size: 0,1,2,4,6,8,10,12,16,20,24,32,40,48,64) --> <div class="m-4 p-6">margin 1rem, padding 1.5rem</div> <div class="mx-auto px-4">horizontal auto margin, horizontal padding</div> <!-- Sizing --> <div class="w-full max-w-md h-16">width, max-width, height</div> <div class="w-1/2 h-screen">50% width, full viewport height</div> <!-- Typography --> <p class="text-xl font-bold text-gray-900">Large bold dark text</p> <p class="text-sm text-gray-500 italic">Small muted italic text</p> <p class="text-center uppercase tracking-widest">Centered uppercase</p> <!-- Colors --> <div class="bg-blue-500 text-white">Blue background</div> <div class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white"> Gradient background </div> <!-- Borders & Rounded --> <div class="border border-gray-200 rounded-xl shadow-sm">Rounded card</div> <div class="border-2 border-indigo-500 rounded-full">Circle border</div>
Result
Open