UI-Blöcke und -Abschnitte – schneller erstellen
Nur CSS-CSS-UI-Blöcke und -Abschnitte von Tailwind. Kein JavaScript, WCAG AA zugänglich, Framework-unabhängig. Kopieren Sie Helden, Überschriften, Preisabschnitte und Funktionsblöcke und fügen Sie sie ein. Funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
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.
Kopfzeile
Nur CSS-CSS-Header-Blöcke von Tailwind mit Navigationsleiste, Branding und mobiler Schublade. Klebrige, transparente und responsive Layoutvarianten. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
Held
Nur CSS Tailwind CSS Hero-Blöcke – vorgefertigte Landingpage-Abschnitte mit zentriertem, geteiltem und Bild-Layout. Kein JavaScript erforderlich, WCAG AA zugänglich. Funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
Preise
Nur CSS-Tailwind-CSS-Preisblöcke, die aus Karten- und Schaltflächenkomponenten bestehen. Preistabellen mit Stufen, Funktionslisten und CTAs kopieren und einfügen. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
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.