---
title: "Hero"
type: block
version: "2.2.1"
doc_version: "2.4.3"
status: stable
date: 2026-05-20
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Accessible hero section components built with Tailwind CSS. Includes headline, subtext, and CTA button variants."
url: https://frutjam.com/blocks/hero
---

# Hero

Ready-made hero layouts built with the [hero component](/components/hero), [button](/components/button), and [badge](/components/badge).

## Centered Hero

```html
<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

```html
<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

```html
<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>
```