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>