Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

<div class="bg-sky-100 text-sky-900 p-4">Light sky panel</div>
<div class="bg-indigo-600 text-white p-4">Indigo button</div>

<div class="bg-black/50 backdrop-blur-sm p-6">Semi-transparent overlay</div>

<div class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white p-8 rounded-xl">
  Gradient card
</div>

<input class="border border-gray-300 rounded-md px-3 py-2
              focus:border-blue-500 focus:ring-2 focus:ring-blue-200 focus:outline-none" />

<div class="border-2 border-dashed border-gray-400 rounded-lg p-4">
  Dashed placeholder area
</div>

<button class="bg-blue-600 text-white px-4 py-2 rounded
               focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2">
  Accessible button
</button>

<div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300 p-6">
  <h3 class="font-semibold text-lg mb-2">Card title</h3>
  <p class="text-gray-500 text-sm">Card body text.</p>
</div>