<div class="
                max-w-md
                mx-auto
                bg-white
                rounded-xl
                shadow-md
                overflow-hidden
                md:max-w-2xl
            ">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="https://images.unsplash.com/photo-1624371790492-6dff821b2333?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1049&q=80" alt="Man looking at item at a store" />
    </div>
    <div class="p-8">
      <div class="
                            uppercase
                            tracking-wide
                            text-sm text-indigo-500
                            font-semibold
                        ">
        產品說明文字
      </div>
      <a href="#" class="
                            block
                            mt-1
                            text-lg
                            leading-tight
                            font-medium
                            text-black
                            hover:underline
                        ">產品名稱要寫在這裡才會清楚明瞭</a>
      <p class="mt-2 text-gray-500">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Tempore magnam unde ab sapiente tempora asperiores
        architecto nam, ad dolore soluta?
      </p>
    </div>
  </div>
</div>