AdorableCSS Playground
BetaExperiment with AdorableCSS v2 syntax in real-time
HTML Editor
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
<div class="container(xl) py(3xl)">
<div class="vbox(pack) gap(2xl)">
<!-- Hero Section -->
<div class="vbox(pack) gap(lg) text(center)">
<h1 class="heading(display/xl) bold bg-clip(text) c(135deg/#667eea..#764ba2)">
Welcome to AdorableCSS
</h1>
<p class="body(xl) c(neutral-600) max-w(2xl) line-height(relaxed)">
A modern CSS framework with intuitive syntax inspired by Figma
</p>
</div>
<!-- Feature Cards -->
<div class="grid grid-cols(1) md:grid-cols(3) gap(xl) w(full)">
<div class="bg(white) p(xl) r(2xl) shadow(lg) hover:shadow(xl) transition group hover:translate-y(-4px)">
<div class="size(60px) bg(135deg/#667eea..#764ba2) r(full) hbox(pack) mb(lg) group-hover:rotate(360) transition duration(1000)">
<span class="heading(h3)">🎨</span>
</div>
<h3 class="title(xl) bold mb(sm)">Beautiful Design</h3>
<p class="c(neutral-600)">Craft stunning interfaces with ease</p>
</div>
<div class="bg(white) p(xl) r(2xl) shadow(lg) hover:shadow(xl) transition group hover:translate-y(-4px)">
<div class="size(60px) bg(135deg/#f093fb..#f5576c) r(full) hbox(pack) mb(lg) group-hover:rotate(360) transition duration(1000)">
<span class="heading(h3)">âš¡</span>
</div>
<h3 class="title(xl) bold mb(sm)">Lightning Fast</h3>
<p class="c(neutral-600)">Optimized for performance</p>
</div>
<div class="bg(white) p(xl) r(2xl) shadow(lg) hover:shadow(xl) transition group hover:translate-y(-4px)">
<div class="size(60px) bg(135deg/#4facfe..#00f2fe) r(full) hbox(pack) mb(lg) group-hover:rotate(360) transition duration(1000)">
<span class="heading(h3)">🚀</span>
</div>
<h3 class="title(xl) bold mb(sm)">Developer Friendly</h3>
<p class="c(neutral-600)">Intuitive syntax you'll love</p>
</div>
</div>
<!-- CTA Button -->
<button class="px(2xl) py(lg) bg(135deg/#667eea..#764ba2) c(white) r(full) title(lg) semi shadow(xl) hover:shadow(2xl) hover:translate-y(-2px) transition cursor(pointer)">
Get Started →
</button>
</div>
</div>