Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

<div class="bg-white rounded-xl shadow p-6
            transform transition-all duration-300 ease-out
            hover:scale-105 hover:shadow-xl">
  Hover to elevate me
</div>

<button class="group flex items-center gap-2">
  <svg class="w-5 h-5 transition-transform duration-300 group-hover:rotate-180"
       viewBox="0 0 24 24" fill="currentColor">
    <path d="M19 9l-7 7-7-7"/>
  </svg>
  Toggle
</button>

<a class="inline-flex items-center gap-1 text-blue-600 hover:gap-3 transition-all">
  Learn more
  <span class="transition-transform group-hover:translate-x-1">→</span>
</a>

<svg class="animate-spin h-8 w-8 text-blue-500" viewBox="0 0 24 24" fill="none">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
</svg>

<div class="space-y-3 p-4">
  <div class="h-4 bg-gray-200 rounded animate-pulse w-3/4"></div>
  <div class="h-4 bg-gray-200 rounded animate-pulse w-1/2"></div>
  <div class="h-4 bg-gray-200 rounded animate-pulse w-5/6"></div>
</div>

<div class="relative inline-flex">
  <button class="bg-gray-800 text-white p-2 rounded-full">🔔</button>
  <span class="absolute top-0 right-0 flex h-3 w-3">
    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
    <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
  </span>
</div>