Tailwind CSS E-commerce Product Detail Card

<div
  class="bg-card text-card-foreground shadow-sm border border-gray-200 dark:border-gray-800 rounded-lg p-4 max-w-sm mx-auto"
  data-v0-t="card"><img src="https://landingpage.fyi/topics/email-marketing-tools.svg" alt="Product Image" width="400"
    height="400" class="object-cover w-full rounded-lg" style="aspect-ratio: 400 / 400; object-fit: cover;">
  <h2 class="font-semibold text-xl mt-4">Product Title</h2>
  <p class="text-gray-500 dark:text-gray-400 mt-2">$99.99</p>
  <p class="text-gray-600 dark:text-gray-300 mt-2">
    This is a description of the product. It provides information about the product and its features.
  </p><button
    class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 mt-4 bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg"
    type="submit">
    Add to Cart
  </button>
</div>