TailwindCSS + DaisyUI Layout Demo

Explora diferentes layouts responsive con TailwindCSS, DaisyUI y Boxicons

Sidebar Layout

Menú lateral izquierdo con navegación vertical

Navegación lateral
Contenido centrado
Responsive design

Top Menu Layout

Barra de navegación superior horizontal

Header fijo
Ancho completo
Mobile friendly

Clean Layout

Layout limpio sin menú, contenido centrado

Sin navegación
Foco en contenido
Minimalista

Formularios

Inputs estandarizados con estilos consistentes

Estilos estandarizados
Estados hover/focus
Iconos integrados

Autenticación

Sistema de login y registro con Devise

Login seguro
Recuperar contraseña
Registro de usuarios

Paginación

Demo de paginación con Pagy y usuarios

Pagy integration
TailwindCSS styled
5 usuarios por página

Email Demo

Envío de emails con letter_opener y premailer

Letter opener
CSS inline styles
HTML templates

Configuración de Themes

Selector de Themes

• Ubicación: Disponible en todas las páginas a través del icono de paleta

• Auto: Sigue el tema del sistema operativo

• Light/Dark: Themes básicos claros y oscuros

• Themes especiales: cupcake, corporate, retro, cyberpunk, valentine, synthwave

• Persistencia: Tu selección se guarda automáticamente

Theme por Defecto

// En application.html.erb
<html data-theme="auto">
// Opciones disponibles:
auto, light, dark, cupcake,
corporate, retro, cyberpunk,
valentine, synthwave

Cambio de theme por defecto

Modifica el atributo data-theme en el layout principal

Características

Responsive

Adaptable a todos los dispositivos

DaisyUI + TailwindCSS

Utility-first CSS con componentes

Componentes

Partials reutilizables

Boxicons

Iconos de alta calidad