Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!-- Arbitrary values: write any CSS value in square brackets --> <!-- Exact pixel measurements --> <div class="w-[347px] h-[200px] bg-[#1da1f2] rounded-[14px]"> Twitter-blue box with exact dimensions </div> <!-- Arbitrary colors --> <p class="text-[#6366f1] font-semibold">Indigo text (#6366f1)</p> <div class="bg-[hsl(220,90%,56%)] text-white p-4">HSL background</div> <div class="bg-[rgb(99,102,241)] text-white p-4">RGB background</div> <!-- Arbitrary with opacity modifier --> <div class="bg-[#1da1f2]/20 text-[#1da1f2] font-bold p-3 rounded-lg"> 20% opacity tint of a brand color </div> <!-- Complex CSS values --> <div class="grid grid-cols-[1fr_2fr_1fr] gap-4"> <div class="bg-gray-100 p-4">1fr</div> <div class="bg-gray-200 p-4">2fr</div> <div class="bg-gray-100 p-4">1fr</div> </div> <!-- calc() arbitrary value --> <aside class="w-[calc(100%-2rem)] lg:w-[calc(33.333%-1rem)]"> Sidebar with calc-based width </aside> <!-- CSS custom property in class --> <button class="bg-[var(--brand-primary)] text-white px-4 py-2 rounded"> Uses CSS variable </button> <!-- Arbitrary z-index --> <div class="z-[9999] fixed top-0 left-0">High z-index overlay</div> <!-- Arbitrary line-height --> <p class="text-base leading-[1.75] text-gray-700"> Custom 1.75 line height for comfortable reading </p>
Result
Open