8 days ago

(Re-generate): Necesito un panel de administracion. Quiero que en la esquina superior derecha aparezca la foto de perfil del admin y su nombre de usuario. En la parte izquierda quiero tener el menu / nav bar, con las diferentes areas que va a poder tocar el admin (dashboard, usuarios, clientes, trabajadores, ejercicios). La idea es que en todo momento tengas las opciones del menu a la izquierda y cuando haces click en cualquiera de las opciones te salga a la derecha el componente en cuestion. Basate en estos estilos: Estética Base: Paleta Principal: Claros: #f8fafc (fondo), #1e293b (texto), acentos en #3b82f6 (azul) y #8b5cf6 (púrpura) Oscuros: #0f172a (fondo), #e2e8f0 (texto), acentos en #60a5fa (azul neón suave) y #a78bfa (lavanda) Efectos Visuales: Capas Acrylic: backdrop-blur-md + gradiente from-white/10 to-white/5 Depth: Sombras suaves (shadow-lg) + elevación hover (hover:-translate-y-1) Bordes: 1px con transparencia (border-white/30) Directivas de Componentes: Jerarquía Tipográfica: Títulos: font-light + tracking-wide + gradiente sutil Texto cuerpo: leading-relaxed + contraste 4.5:1 Sistema de Iconos: SVG minimalistas (2px stroke) en currentColor Cajas de iconos: rounded-lg + fondo semi-transparente (bg-blue-100/20) Microinteracciones: Transiciones: duration-300 + easing ease-in-out Hover States: Cambios de opacidad y transformaciones suaves Layout Principles: Espaciado: Múltiplos de 4px (p-6, gap-8) Responsive: Breakpoints con min-w-0 + max-w-screen-xl Reglas No Negociables: ✓ Usar backdrop-filter para efectos glassmorphism ✓ Mantener padding interno mínimo de 24px en cards ✓ Siempre incluir versión dark/light con variables CSS nativas ✓ Priorizar contenedores fluidos sobre medidas fijas Ejemplo de Tono Visual: 'Profesional pero accesible, con equilibrio entre minimalismo tech y calidez orgánica. Utilizar elementos de profundidad sutil (capas superpuestas con transparencias) y toques de color vibrantes pero no saturados.' Output Esperado: Componentes que parezcan parte de un sistema unificado, manteniendo coherencia en: Balance espacial (relación padding/margen) Consistencia cromática (mismo peso de colores para mismos elementos) Alineación vertical/horizontal estricta Proporción áurea en dimensiones (ej: tarjetas en relación 3:4)"

Fork

Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs! 

Build from scratch or select prebuilt tailwind templates