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.
Los bloques son secciones de páginas listas para producción ensambladas a partir de componentes de Frutjam. Cada bloque es HTML autónomo: colóquelo en cualquier plantilla de Django, archivo Laravel Blade, página HTMX o componente React y funcionará de inmediato. Los bloques heredan automáticamente su tema activo de Frutjam, por lo que cambiar entre un tema claro, oscuro o personalizado no requiere cambios en el HTML del bloque. Todos los bloques son solo CSS, accesibles a WCAG AA y creados para Tailwind CSS v4: sin JavaScript, sin proceso de compilación más allá del propio Tailwind.
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.
¿Qué son los bloques?
Los bloques son secciones de página más grandes y listas para usar que se crean componiendo componentes de Frutjam juntos. Mientras que un componente es un único elemento de la interfaz de usuario (un botón, una tarjeta, una insignia), un bloque es una sección de diseño completa (un héroe, una tabla de precios, un encabezado de sitio) lista para copiar y pegar en su proyecto.
Solo CSS
Cada bloque está construido con componentes Frutjam y utilidades Tailwind CSS: cero JavaScript, sin dependencias adicionales.
Copiar y pegar listo
Cada bloque es HTML autónomo. Pégalo en cualquier plantilla de Django, Laravel Blade, página HTMX o componente de React.
Consciente del tema
Los bloques heredan su tema activo de Frutjam automáticamente: cambie de tema y todos los bloques se actualizarán sin necesidad de cambios.
¿Cuál es la diferencia entre un bloque y un componente?
Un componente es un único elemento de interfaz de usuario reutilizable: un botón, una tarjeta, una insignia. Un bloque es una sección de página completa que compone múltiples componentes en un diseño: una sección principal, una tabla de precios, un encabezado de sitio con barra de navegación y un cajón móvil. Utilice componentes para crear diseños personalizados; Utilice bloques para un montaje rápido de la página.
¿Los bloques funcionan con Django, HTMX y Laravel?
Sí, los bloques son HTML simple y utilizan clases de componentes de Frutjam. Funcionan en cualquier sistema de plantillas: Django, HTMX, Laravel Blade, Rails ERB, Jinja2 o HTML estático. Sin marco de JavaScript, no hay pasos de construcción más allá del propio Tailwind CSS.
¿Se están agregando más bloques?
Sí, se agregan nuevos bloques periódicamente. Los planes Pro y Team incluyen acceso a bloques premium que incluyen secciones de funciones, testimonios, CTA y plantillas de página completa.