UI 블록 및 섹션 - 더욱 빠르게 구축
CSS 전용 Tailwind CSS UI 블록 및 섹션. JavaScript 없음, WCAG AA 액세스 가능, 프레임워크에 구애받지 않음. 영웅, 헤더, 가격 섹션 및 기능 블록을 복사하여 붙여넣습니다. Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
Blocks are production-ready page sections assembled from Frutjam components. Each block is self-contained HTML — drop it into any Django template, Laravel Blade file, HTMX page, or React component and it works immediately. Blocks inherit your active Frutjam theme automatically, so switching between light, dark, or a custom theme requires no changes to the block HTML. All blocks are CSS-only, WCAG AA accessible, and built for Tailwind CSS v4 — no JavaScript, no build pipeline beyond Tailwind itself.
헤더
탐색 모음, 브랜딩 및 모바일 서랍이 포함된 CSS 전용 Tailwind CSS 헤더 블록입니다. 고정적이고 투명하며 반응성이 뛰어난 레이아웃 변형입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
영웅
CSS 전용 Tailwind CSS 히어로 블록 — 중앙 정렬, 분할 및 이미지 레이아웃이 포함된 기성 랜딩 페이지 섹션입니다. JavaScript가 필요하지 않으며 WCAG AA에 액세스할 수 있습니다. Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
가격
카드 및 버튼 구성요소로 구축된 CSS 전용 Tailwind CSS 가격 블록입니다. 계층, 기능 목록, CTA가 포함된 가격표를 복사하여 붙여넣으세요. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
What are blocks?
Blocks are larger, ready-made page sections built by composing Frutjam components together. Where a component is a single UI element (a button, a card, a badge), a block is a complete layout section — a hero, a pricing table, a site header — ready to copy and paste into your project.
CSS-only
Every block is built with Frutjam components and Tailwind CSS utilities — zero JavaScript, no extra dependencies.
Copy-paste ready
Each block is self-contained HTML. Paste it into any Django template, Laravel Blade, HTMX page, or React component.
Theme-aware
Blocks inherit your active Frutjam theme automatically — switch themes and all blocks update with no changes needed.
What is the difference between a block and a component?
A component is a single reusable UI element — a button, a card, a badge. A block is a complete page section that composes multiple components into a layout — a hero section, a pricing table, a site header with navbar and mobile drawer. Use components to build custom layouts; use blocks for fast page assembly.
Do blocks work with Django, HTMX, and Laravel?
Yes — blocks are plain HTML using Frutjam component classes. They work in any templating system: Django, HTMX, Laravel Blade, Rails ERB, Jinja2, or static HTML. No JavaScript framework, no build step beyond Tailwind CSS itself.
Are more blocks being added?
Yes — new blocks are added regularly. The Pro and Team plans include access to premium blocks including feature sections, testimonials, CTAs, and full page templates.