Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

<div class="bg-white rounded-2xl shadow-sm border border-gray-100
            hover:shadow-lg transition-shadow duration-300 overflow-hidden group">

<div class="aspect-[4/3] overflow-hidden">
    <img src="product.jpg" alt="Product"
         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
  </div>

<div class="p-5">
    <span class="text-xs font-semibold uppercase tracking-wider text-blue-600">Electronics</span>
    <h3 class="mt-1 text-lg font-bold text-gray-900 line-clamp-2">
      Wireless Noise-Cancelling Headphones
    </h3>
    <p class="mt-2 text-sm text-gray-500 line-clamp-2">
      Premium 40-hour battery life, adaptive noise cancellation, and studio-quality sound.
    </p>
  </div>

<div class="px-5 pb-5 flex items-center justify-between">
    <div>
      <span class="text-2xl font-bold text-gray-900">$249</span>
      <span class="text-sm text-gray-400 line-through ml-2">$349</span>
    </div>
    <button class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium
                   px-4 py-2 rounded-lg transition-colors">
      Add to cart
    </button>
  </div>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6
            flex items-center gap-4">
  <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center shrink-0">
    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197"/>
    </svg>
  </div>
  <div>
    <p class="text-sm font-medium text-gray-500">Total Users</p>
    <p class="text-2xl font-bold text-gray-900">24,521</p>
    <p class="text-xs text-green-600 font-medium mt-0.5">↑ 12% from last month</p>
  </div>
</div>