Live Editor
1<!-- Bootstrap & Tailwind Example -->
2<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">
3  <div class="md:flex">
4    <div class="flex flex-col gap-6">
5      <div class="flex items-center gap-2">
6        <div class="size-3 rounded-full bg-indigo-500 animate-pulse"></div>
7        <span class="uppercase tracking-widest text-xs text-indigo-500 font-bold">Web Utils Pro</span>
8      </div>
9      <h1 class="text-3xl font-extrabold tracking-tight text-zinc-900 dark:text-white">
10        High Performance <span class="text-indigo-600">HTML Preview</span>
11      </h1>
12      <p class="text-zinc-600 dark:text-zinc-400 leading-relaxed">
13        Experience live, 1:1 rendering of your code. Full support for utility-first CSS, modern component layouts, and interactive elements.
14      </p>
15      <div class="flex gap-4">
16        <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">
17          Deploy Now
18        </button>
19        <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">
20          Learn More
21        </button>
22      </div>
23    </div>
24  </div>
25</div>