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.