Stop Rebuilding UI

Logos Bento Dark Variant

A dark inverted bento featured case study logo block for React and Next.js with a rounded dark panel containing a tall featured cell plus four content-rich supporting cells, inverted palette throughout, and monochrome icon marks with industry pills built with shadcn/ui and Tailwind CSS

Scroll to load preview

Anchor a marketing page with an inverted dark bento case study layout for React and Next.js. Features a rounded-2xl bg-foreground dark panel wrapping a three-column two-row bento grid where one tall featured cell holds an inverted size-14 flagship mark with a text-2xl wordmark, an industry pill, a text-base leading-relaxed quote, a highlighted metric with tabular-nums alignment, and an attribution row, while four content-rich supporting cells each carry an icon container, industry pill, wordmark, and retention metric on border-background/15 bg-background/[0.05] inverted surfaces. Built with TypeScript, motion/react parent entrance plus staggered per-cell fade with useReducedMotion, Lucide React icon marks paired with five invented placeholder wordmarks, and Tailwind CSS theme variables. Perfect for dark marketing sections, inverted social-proof panels, and hybrid case-study plus logo-wall moments on landing pages.

FAQ

Last updated on April 11, 2026

Was this page helpful?

Sign in to leave feedback.