Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!-- Traditional CSS approach: write custom class, then style it in a stylesheet --> <!-- HTML --> <div class="card"> <h2 class="card-title">Hello World</h2> <p class="card-body">Some content here.</p> </div> <!-- CSS (separate file) --> /* .card { background: white; border-radius: 8px; padding: 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; } .card-body { color: #6b7280; } */ <!-- ─────────────────────────────────────────── --> <!-- Tailwind utility-first approach: style entirely in HTML --> <div class="bg-white rounded-lg p-4 shadow-md"> <h2 class="text-xl font-bold mb-2">Hello World</h2> <p class="text-gray-500">Some content here.</p> </div> <!-- No custom CSS needed at all. Each class does one thing: bg-white → background-color: #ffffff rounded-lg → border-radius: 0.5rem p-4 → padding: 1rem shadow-md → box-shadow: medium shadow text-xl → font-size: 1.25rem font-bold → font-weight: 700 mb-2 → margin-bottom: 0.5rem text-gray-500→ color: #6b7280 -->
Result
Open