메인 콘텐츠로 건너뛰기
Frutjam logo Frutjam
v2.2.2
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
로그인

스플릿 히어로

한쪽에는 콘텐츠가 있고 다른 한쪽에는 시각적 요소가 있는 2열 레이아웃으로 제품 쇼케이스에 이상적입니다.

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를 사용해 보세요