Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

<div class="grid grid-cols-3 gap-2 p-4">
  <div class="bg-blue-500 text-white p-3 rounded">blue-500</div>
  <div class="bg-emerald-500 text-white p-3 rounded">emerald-500</div>
  <div class="bg-rose-500 text-white p-3 rounded">rose-500</div>
  <div class="bg-amber-400 text-gray-900 p-3 rounded">amber-400</div>
  <div class="bg-violet-600 text-white p-3 rounded">violet-600</div>
  <div class="bg-sky-300 text-sky-900 p-3 rounded">sky-300</div>
</div>

<p class="text-gray-900">Default body text</p>
<p class="text-gray-600">Secondary text</p>
<p class="text-gray-400">Muted / placeholder text</p>
<p class="text-blue-600">Link color</p>
<p class="text-emerald-600">Success message</p>
<p class="text-red-600">Error message</p>
<p class="text-amber-600">Warning message</p>

<input class="border border-gray-300 focus:border-blue-500 rounded px-3 py-2" />
<div class="border-l-4 border-blue-500 pl-4 text-gray-700 italic">
  Callout with left border accent
</div>

<div class="bg-blue-600/20 text-blue-900 p-4 rounded-lg">
  Light blue tint background (20% opacity)
</div>
<div class="bg-black/50 backdrop-blur p-6 text-white rounded-xl">
  Glassmorphism overlay
</div>

<div class="flex gap-1">
  <div class="w-8 h-8 rounded bg-indigo-50"></div>
  <div class="w-8 h-8 rounded bg-indigo-200"></div>
  <div class="w-8 h-8 rounded bg-indigo-400"></div>
  <div class="w-8 h-8 rounded bg-indigo-600"></div>
  <div class="w-8 h-8 rounded bg-indigo-800"></div>
  <div class="w-8 h-8 rounded bg-indigo-950"></div>
</div>