Bloques y secciones de la interfaz de usuario: construya más rápido
Bloques y secciones de la interfaz de usuario CSS de Tailwind solo para CSS. Sin JavaScript, accesible a WCAG AA, independiente del marco. Copie y pegue héroes, encabezados, secciones de precios y bloques de funciones. Funciona con Django, HTMX, Laravel, React y cualquier pila.
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.
Encabezamiento
Bloques de encabezado CSS Tailwind solo para CSS con barra de navegación, marca y cajón móvil. Variantes de diseño adhesivo, transparente y responsivo. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.
Héroe
Bloques héroe CSS de Tailwind solo para CSS: secciones de página de destino listas para usar con diseños centrados, divididos y de imágenes. No se requiere JavaScript, se puede acceder a WCAG AA. Funciona con Django, HTMX, Laravel, React y cualquier pila.
Precios
Bloques de precios CSS Tailwind solo CSS creados con componentes de tarjeta y botón. Copie y pegue tablas de precios con niveles, listas de funciones y CTA. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.
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.