Blocos e seções de UI – Construa mais rápido
Blocos e seções de UI CSS do Tailwind somente CSS. Sem JavaScript, WCAG AA acessível, independente de estrutura. Copie e cole heróis, cabeçalhos, seções de preços e blocos de recursos. Funciona com Django, HTMX, Laravel, React e qualquer pilha.
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.
Cabeçalho
Blocos de cabeçalho CSS Tailwind somente CSS com barra de navegação, marca e gaveta móvel. Variantes de layout fixas, transparentes e responsivas. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Herói
Blocos de heróis Tailwind CSS somente CSS – seções de página de destino prontas com layouts centralizados, divididos e de imagem. Não é necessário JavaScript, WCAG AA acessível. Funciona com Django, HTMX, Laravel, React e qualquer pilha.
Preços
Blocos de preços Tailwind CSS somente CSS criados com componentes de cartão e botão. Copie e cole tabelas de preços com níveis, listas de recursos e CTAs. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
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.