Skip to main content
Frutjam logoFrutjam
v2.3.0
Theme

anh hùng

Cập nhật lần cuối:

Khối CSS CSS Tailwind chỉ dành cho CSS — các phần trang đích được tạo sẵn với bố cục căn giữa, phân chia và hình ảnh. Không cần JavaScript, WCAG AA có thể truy cập được. Hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Bố cục anh hùng tạo sẵn được xây dựng bằng thành phần hero, button và badge.

Anh hùng trung tâm

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>

Anh hùng có huy hiệu

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>

Chia anh hùng

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>

Using Claude Code, Cursor, or another AI editor?

Cherry MCP cung cấp cho trình soạn thảo AI của bạn tên và cấu trúc lớp anh hùng chính xác theo yêu cầu. Không còn những lớp học ảo giác nữa.

Try Cherry MCP