Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!-- Padding varieties --> <div class="p-4">All sides 1rem</div> <div class="px-6 py-3">Horizontal 1.5rem, vertical 0.75rem</div> <div class="pt-8 pb-4 px-4">Top 2rem, bottom 1rem, sides 1rem</div> <div class="p-0.5">2px padding (fractional value)</div> <!-- Margin and centering --> <div class="max-w-xl mx-auto my-8 bg-white rounded-xl shadow p-6"> Centered container with vertical margin </div> <!-- Negative margin for overlap effect --> <div class="relative bg-blue-500 h-32 rounded-t-xl"></div> <div class="bg-white rounded-xl shadow p-6 mx-4 -mt-6 relative z-10"> Card overlapping the banner above </div> <!-- space-y for stacked lists (no flex/grid needed) --> <ul class="space-y-3 p-4"> <li class="bg-white rounded-lg shadow p-4">List item 1</li> <li class="bg-white rounded-lg shadow p-4">List item 2</li> <li class="bg-white rounded-lg shadow p-4">List item 3</li> </ul> <!-- space-x for inline tag groups --> <div class="flex flex-wrap space-x-2"> <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">React</span> <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">TypeScript</span> <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">Tailwind</span> </div> <!-- Responsive spacing --> <section class="py-8 md:py-16 lg:py-24 px-4 sm:px-8 lg:px-16"> Generous vertical padding that scales with viewport </section>
Result
Open