跳至主要內容
Frutjam logo Frutjam
v2.2.5
Theme
Free Plus

英雄

最後更新:

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

英雄與徽章

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

分裂英雄

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

漸變英雄

具有徑向漸變口音和漸變剪輯標題文字的英雄，打造現代、優雅的外觀。

New release · v2.0

Build faster with
beautiful UI

A standards-first component system. Semantic, accessible, and ready to ship.

Get started free View components
W3C validated WCAG AA/AAA Framework agnostic MIT license
登入

分裂英雄

兩欄佈局，一側為內容，另一側為視覺效果 - 非常適合產品展示。

Design system

Components that scale with your product

From prototype to production — Frutjam gives you the building blocks to ship faster without sacrificing quality.

Explore components See examples
Visual area
登入

有社會證明的英雄

透過使用者頭像和低於主要號召性用語的星級評級來加強信任。

Trusted by 10,000+ developers

Ship UI faster, with confidence

Copy-paste components that are accessible, themeable, and built on real CSS standards.

Start for free Browse blocks
User
User
User
User
User

Loved by developers worldwide

登入

使用 Claude Code、Cursor 或其他 AI 編輯器？

Cherry MCP 為您的 AI 編輯器按需提供準確的 英雄 類別名稱和結構。不再有幻覺課程。

嘗試Cherry MCP