Free Plus

ヒーロー

最終更新日: 7月 13, 2026

CSS のみの Tailwind CSS ヒーローブロック — 中央揃え、分割レイアウト、画像レイアウトを備えた既製のランディングページセクション。 JavaScript は必要ありません。WCAG AA にアクセスできます。 Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

hero コンポーネント、button、および badge で構築された既製のヒーローレイアウト。

中心のヒーロー

Build something great

Start fast with accessible, themeable components that work with any stack.

Get started Learn more

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

コードを表示

バッジを持ったヒーロー

Now in v2.0

Ship UI that scales

Copy-paste components built on real CSS standards — semantic, accessible, and ready for production.

Start building View docs

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

コードを表示

スプリットヒーロー

Components that scale with your product

From prototype to production — get the building blocks to ship faster without sacrificing quality.

Explore components See examples

Visual area

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