最新
网格与便当Feature Bento 3x2
Asymmetric feature tiles where a hero cell spans two columns and two rows and the rest pack around it.
#bento#features#grid
3 个框架中级
Loading…
A near-black bento with a soft radial glow and frosted glass tiles over it.
<!-- The section paints its own dark surface and glow, so it looks identical on a
light or dark page - no dark: variants. Glass tiles are white/5 over the glow. -->
<section class="relative isolate w-full overflow-hidden rounded-3xl bg-gray-950">
<div class="pointer-events-none absolute -top-24 left-1/2 -z-10 h-72 w-72 -translate-x-1/2 rounded-full bg-indigo-600/40 blur-3xl" aria-hidden="true"></div>
<div class="grid grid-cols-1 gap-4 p-4 sm:grid-cols-3 sm:p-6">
<article class="rounded-2xl border border-white/10 bg-white/5 p-6 backdrop-blur sm:col-span-2 sm:row-span-2">
<h3 class="text-lg font-semibold text-white">Built for scale</h3>
<p class="mt-2 text-sm leading-relaxed text-gray-300">Multi-region by default, with automatic failover you never have to think about.</p>
</article>
<article class="rounded-2xl border border-white/10 bg-white/5 p-5 backdrop-blur">
<h3 class="text-sm font-semibold text-white">Zero config</h3>
<p class="mt-1 text-sm text-gray-300">Push to deploy.</p>
</article>
<article class="rounded-2xl border border-white/10 bg-white/5 p-5 backdrop-blur">
<h3 class="text-sm font-semibold text-white">Observability</h3>
<p class="mt-1 text-sm text-gray-300">Traces out of the box.</p>
</article>
</div>
</section>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
tiles | GlassTile[] | - | Tiles |
className | string | - | 合并到根元素上的额外类名。 |
The section paints its own `bg-gray-950` surface and a blurred glow, so it looks identical on a light or dark page with no `dark:` variants. Tiles are `bg-white/5` with `backdrop-blur` and a hairline `white/10` border; the glow is `aria-hidden` and sits behind the content. The grid collapses to one column on phones.