CSS-only Tailwind CSS hero blocks — ready-made landing page sections with centered, split, and image layouts. No JavaScript required, WCAG AA accessible. Works with Django, HTMX, Laravel, React, and any stack.
Ready-made hero layouts built with the hero component, button, and badge.
Centered Hero
Build something great
Start fast with accessible, themeable components that work with any stack.
1 2 3 4 5 6 7 8 9 10 11 12 | <section class="hero min-h-[60vh]"> <div class="hero-content text-center"> <div class="max-w-lg"> <h1 class="heading-5xl mb-4">Build something great</h1> <p class="para opacity-60 mb-8">Start fast with accessible, themeable components that work with any stack.</p> <div class="flex flex-wrap justify-center gap-3"> <a href="#" class="btn btn-primary btn-lg">Get started</a> <a href="#" class="btn btn-outline btn-lg">Learn more</a> </div> </div> </div> </section> |
Hero with Badge
Ship UI that scales
Copy-paste components built on real CSS standards — semantic, accessible, and ready for production.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <section class="hero min-h-[60vh] bg-base-200"> <div class="hero-content text-center"> <div class="max-w-xl"> <div class="flex justify-center mb-5"> <span class="badge badge-primary badge-soft badge-sm">Now in v2.0</span> </div> <h1 class="heading-5xl mb-4">Ship UI that scales</h1> <p class="para opacity-60 mb-8">Copy-paste components built on real CSS standards — semantic, accessible, and ready for production.</p> <div class="flex flex-wrap justify-center gap-3"> <a href="#" class="btn btn-primary btn-lg">Start building</a> <a href="#" class="btn btn-ghost btn-lg">View docs</a> </div> </div> </div> </section> |
Split Hero
Components that scale with your product
From prototype to production — get the building blocks to ship faster without sacrificing quality.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <section class="hero min-h-[60vh]"> <div class="hero-content flex-col lg:flex-row gap-12"> <div class="max-w-md"> <h1 class="heading-4xl mb-4">Components that scale with your product</h1> <p class="para opacity-60 mb-8">From prototype to production — get the building blocks to ship faster without sacrificing quality.</p> <div class="flex flex-wrap gap-3"> <a href="#" class="btn btn-primary">Explore components</a> <a href="#" class="btn btn-outline">See examples</a> </div> </div> <div class="card card-lg w-full max-w-sm aspect-video flex items-center justify-center"> <span class="para opacity-40">Visual area</span> </div> </div> </section> |
Gradient Hero
A hero with a radial gradient accent and gradient-clipped headline text for a modern, polished look.
Build faster with
beautiful UI
A standards-first component system. Semantic, accessible, and ready to ship.
Split Hero
A two-column layout with content on one side and a visual on the other — ideal for product showcases.
Components that scale with your product
From prototype to production — Frutjam gives you the building blocks to ship faster without sacrificing quality.
Hero with Social Proof
Reinforce trust with user avatars and a star rating below the primary call-to-action.
Ship UI faster, with confidence
Copy-paste components that are accessible, themeable, and built on real CSS standards.
Loved by developers worldwide
Using Claude Code, Cursor, or another AI editor?
Cherry MCP gives your AI editor the exact Hero class names and structure on demand. No more hallucinated classes.