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.
Os blocos são seções de páginas prontas para produção, montadas a partir de componentes Frutjam. Cada bloco é HTMX independente - coloque-o em qualquer modelo Django, arquivo Laravel Blade, página HTMX ou componente React e ele funciona imediatamente. Os blocos herdam seu tema Frutjam ativo automaticamente, portanto, alternar entre tema claro, escuro ou personalizado não requer alterações no HTMX do bloco. Todos os blocos são somente CSS, acessíveis por WCAG AA e construídos para Tailwind CSS v4 - sem JavaScript, sem pipeline de construção além do próprio Tailwind.
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.
O que são blocos?
Os blocos são seções de página maiores e prontas, construídas através da composição de componentes Frutjam. Enquanto um componente é um único elemento de UI (um botão, um cartão, um emblema), um bloco é uma seção de layout completa – um herói, uma tabela de preços, um cabeçalho de site – pronta para copiar e colar em seu projeto.
Somente CSS
Cada bloco é construído com componentes Frutjam e utilitários Tailwind CSS – zero JavaScript, sem dependências extras.
Copiar e colar pronto
Cada bloco é HTMX independente. Cole-o em qualquer template Django, Laravel Blade, página HTMX ou componente React.
Consciente do tema
Os blocos herdam seu tema Frutjam ativo automaticamente – troque de tema e todos os blocos são atualizados sem a necessidade de alterações.
Qual é a diferença entre um bloco e um componente?
Um componente é um único elemento de UI reutilizável – um botão, um cartão, um crachá. Um bloco é uma seção de página completa que compõe vários componentes em um layout – uma seção principal, uma tabela de preços, um cabeçalho de site com barra de navegação e gaveta móvel. Use componentes para construir layouts personalizados; use blocos para montagem rápida de páginas.
Os blocos funcionam com Django, HTMX e Laravel?
Sim – os blocos são HTMX simples usando classes de componentes Frutjam. Eles funcionam em qualquer sistema de templates: Django, HTMX, Laravel Blade, Rails ERB, Jinja2 ou HTMX estático. Nenhuma estrutura JavaScript, nenhuma etapa de construção além do próprio Tailwind CSS.
Mais blocos estão sendo adicionados?
Sim – novos blocos são adicionados regularmente. Os planos Pro e Team incluem acesso a blocos premium, incluindo seções de recursos, depoimentos, CTAs e modelos de página inteira.