Alpine.js + Tailwind
Penguin UI
Controles con un acabado cuidado
Tarjetas, menús y formularios para descubrir distintas formas de resolver una misma interfaz.
Qué mirarExplora sus variantes de navegación y tarjetas.
Explorar webDE LA IDEA A LA INTERFAZ
Explora. Prueba.
Dale forma a tu web.
Componentes que puedes tocar, estilos que puedes comparar y código que puedes llevarte. Todo, en un mismo lugar.
01 Encuentra una idea02 Prueba cómo funciona03 Copia su código
LA CAJA DE HERRAMIENTAS
Componentes y patrones
Encuentra qué necesitas, entiende para qué sirve y pruébalo en directo.
Empieza por lo que necesitas
Una selección de lo esencialTIPOGRAFÍA / EXPLORAR Y COMPARAR
Una letra cambia todo.
300 fuentes seleccionadas por su variedad visual. Elige un estilo y prueba tus propias palabras.
Fuentes cargadas desde fuentes.guzmo.es. Usa «Copiar enlace de carga» en la cabecera de tu web y «Copiar CSS» en el elemento que quieras diseñar. Los enlaces apuntan a fuentes.guzmo.es.
Fuentes consultadas y uso en tu servidor
Selección del 14 de septiembre de 2026, a partir de 1.825 familias con alfabeto latino. Los 23 grupos son una guía editorial; una fuente puede encajar en varios estilos. Se muestra una variante representativa por familia, sin duplicar sus pesos.
La biblioteca incluye archivos WOFF2, pesos y cursivas disponibles y la licencia de cada familia. Las variantes variables conservan los rangos de ejes solicitados. Se incluyen los subconjuntos latino y latino extendido cuando existen; no se garantiza cobertura de todos los idiomas o símbolos. La página oficial enlazada permite consultar el proyecto original.
Google Fonts · catálogo y descargas · Licencias por familia · Google Design · elegir tipografía · API oficial
Dos fuentes, una voz.
12 combinaciones con roles claros. Mantén el mismo texto para comparar el titular, el párrafo y los controles. Amplía una muestra para verla con más espacio.
12 combinaciones
Las muestras usan las fuentes reales de la biblioteca. La carga necesita los archivos locales o conexión en la versión publicada. Copia los enlaces de carga y el CSS para usarlas en tu web.
No hay combinaciones con ese filtro.
REFERENCIAS PARA EXPLORAR
Ideas que puedes tocar.
Ocho lugares para descubrir componentes, probar interacciones y encontrar otra forma de diseñar tu próxima página.
Alpine.js · colección de pago
Alpine UI Components
Pequeñas interacciones, bien resueltas
La colección oficial de Alpine para explorar componentes y cómo se comportan.
Qué mirarFíjate en los estados abiertos, seleccionados y desplegados.
Explorar webjQuery UI
jQuery UI Demos
Prueba, arrastra y ordena
Demos de calendarios, autocompletado, acordeones y elementos que puedes mover o reorganizar.
Qué mirarPrueba Sortable, Draggable y Datepicker.
Explorar webHTMX
HTMX Examples
Una página que responde
Patrones de búsqueda al escribir, edición directa y carga de contenido sin recargar toda la página.
Qué mirarExplora Active Search, Click to Edit e Infinite Scroll.
Explorar webTailwind + JavaScript
Preline Components
Un catálogo de posibilidades
Formularios, navegación y ventanas con ejemplos para comparar variantes de cada componente.
Qué mirarCompara cómo distribuyen controles y acciones.
Explorar webBloques gratuitos y prémium
Preline Blocks
Ideas para la página completa
Cabeceras, galerías, precios y testimonios que muestran cómo combinar varias piezas.
Qué mirarMira las cabeceras y las composiciones de galerías.
Explorar webReact · gratuito y prémium
Aceternity UI
Movimiento que llama la atención
Componentes, bloques y plantillas con efectos visuales para descubrir otras formas de presentar contenido.
Qué mirarObserva las tarjetas y las transiciones al desplazarte.
Explorar webColección de pago · acceso con cuenta
Tailwind Plus
Interfaces que encajan entre sí
Bloques para aplicaciones, páginas comerciales y tiendas con una línea visual consistente.
Qué mirarFíjate en la jerarquía, el espacio y las tablas.
Abrir colección (requiere cuenta)Las ilustraciones representan el tipo de recurso; no son capturas de las webs. Los enlaces se abren en una pestaña nueva. Algunas colecciones reservan contenido para sus clientes.
ESTRUCTURAS PARA TU PRÓXIMA WEB
Una web. Dos pantallas.
Compara 18 formas de organizar una página. Cada pareja muestra el mismo diseño en escritorio y móvil: pulsa una vista para explorar el ejemplo.
Escritorio Móvil
Ejemplos propios · menús y controles interactivos al ampliar
UN ATLAS DE IDENTIDADES VISUALES
40 estilos. Muchas formas de mirar.
Explora tu lista de estilos en ejemplos propios. Compara escritorio y móvil, descubre sus claves visuales y pulsa cualquier vista para ampliarla.
Escritorio Móvil
Estéticas, composiciones y efectos que pueden combinarse.
40 estilos
COLOR EN CONTEXTO
60 paletas. Un mismo diseño.
Compara combinaciones aplicadas a una web, en escritorio y móvil. Copia sus colores o el CSS y descubre qué función cumple cada tono.
Escritorio Móvil
10 familias · 5 colores por paleta · códigos copiables
60 paletas
Contraste comprobado en texto sobre fondo, texto sobre superficie, botón principal y acento: mínimo 4,5:1. La comprobación corresponde a esos pares concretos, no a cualquier mezcla de colores.
Referencias y uso de las paletas
Selección propia de combinaciones. Los cinco colores tienen funciones distintas; el CSS incluye además los textos sobre principal y acento. Las muestras mantienen la misma composición para facilitar la comparación.
Referencias: Color Hunt · Realtime Colors · Radix Colors · Contraste de texto · W3C. Los enlaces se abren en otra pestaña.
ICONOGRAFÍA · ATLAS VISUAL
La misma idea, otro carácter.
22 interpretaciones de Inicio, Buscar, Ajustes y Favoritos. Compara el dibujo, la geometría y los acabados; pulsa una muestra para verla ampliada y aplicada a una interfaz.
Un estilo puede combinar varias decisiones.
Un icono puede ser lineal, redondeado y estar dentro de un círculo a la vez. Por eso los contenedores y el peso del trazo se exploran aparte. «Minimalista» describe el grado de simplificación; «glyph» se reúne aquí con sólido.
22 ejemplos · 4 familias
DECISIONES COMBINABLES
El soporte y el trazo también cuentan
Conserva el dibujo y cambia una variable. Circular, cuadrado y píldora son contenedores; fino, regular y grueso son pesos.
El área pulsable puede ser amplia aunque el icono sea pequeño. Un badge también puede indicar un estado o un contador; la píldora de esta muestra solo cambia la forma del soporte.
Criterio de organización y referencias
Selección editorial propia, no una clasificación oficial ni exhaustiva. Se agrupan las similitudes y se separan atributos que pueden combinarse. Se añaden degradado, angular, grabado y neón; se distingue volumen ilustrado de realismo y se mantiene sketch como variante de dibujo a mano. Los dibujos son muestras SVG originales para comparar estilos, no copias de las bibliotecas enlazadas.
Material Symbols: relleno, peso y tamaño óptico · Phosphor: variantes y duotono · IBM: iconos de interfaz, de app y pictogramas · Icons8: familias visuales. Consulta: septiembre de 2026. Los enlaces se abren en otra pestaña.
Las texturas y el volumen son interpretaciones vectoriales. Un icono decorativo acompaña a su etiqueta; un botón de solo icono necesita un nombre accesible. Las muestras no certifican la accesibilidad de cualquier combinación o tamaño.
ANIMACIONES E INTERACCIONES
Movimiento con una función.
12 interacciones para guiar, responder y mostrar cambios. Amplía una muestra para probarla con teclado, ratón o pantalla táctil.
12 ejemplos
FONDOS Y TEXTURAS
La superficie también comunica.
12 fondos geométricos, orgánicos y de color. Compara su efecto en escritorio y móvil, cambia la paleta y ajusta su intensidad.
12 ejemplos
ESTADOS DE INTERFAZ
Qué pasa antes, durante y después.
12 situaciones habituales: carga, ausencia de contenido, errores, permisos y confirmaciones. Prueba cómo se resuelve cada una.
12 ejemplos