<!-- Bootstrap & Tailwind Example -->
<div class="max-w-md mx-auto bg-white dark:bg-zinc-900 rounded-2xl shadow-xl overflow-hidden md:max-w-2xl m-8 p-10 border border-zinc-100 dark:border-zinc-800 transition-all hover:shadow-2xl">
  <div class="md:flex">
    <div class="flex flex-col gap-6">
      <div class="flex items-center gap-2">
        <div class="size-3 rounded-full bg-indigo-500 animate-pulse"></div>
        <span class="uppercase tracking-widest text-xs text-indigo-500 font-bold">Web Utils Pro</span>
      </div>
      <h1 class="text-3xl font-extrabold tracking-tight text-zinc-900 dark:text-white">
        High Performance <span class="text-indigo-600">HTML Preview</span>
      </h1>
      <p class="text-zinc-600 dark:text-zinc-400 leading-relaxed">
        Experience live, 1:1 rendering of your code. Full support for utility-first CSS, modern component layouts, and interactive elements.
      </p>
      <div class="flex gap-4">
        <button class="px-6 py-2.5 bg-indigo-600 text-white rounded-xl font-bold hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-500/20 active:scale-95">
          Deploy Now
        </button>
        <button class="px-6 py-2.5 border border-zinc-200 dark:border-zinc-700 rounded-xl font-bold hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-all active:scale-95">
          Learn More
        </button>
      </div>
    </div>
  </div>
</div>