Fragmentos de Código
Encuentra el componente perfecto para tu próximo proyecto.
Acordeón sin JS (FAQ)
Componente de acordeón accesible para secciones de preguntas frecuentes (FAQ), construido nativamente con <details> y <summary> en HTML5 y CSS.
Acordeón de Preguntas Frecuentes
Implementado solo con elementos de resumen/detalles HTML5 y CSS, no se requiere JavaScript. Un acordeón accesible para preguntas frecuentes con animaciones de apertura y cierre suaves.
Acordeón de Imágenes
Un acordeón que no sólo muestra texto sino también una hermosa imagen de fondo cuando abres el panel.
grupos de avatar superpuestos
Interfaz de usuario de avatar con múltiples íconos de usuario apilados uno encima del otro y una insignia que muestra cuántas personas quedan.
Fondo con Degradado Animado
Un elegante fondo degradado con transiciones de color fluidas, implementado exclusivamente con CSS.
Fondo de Degradado de Malla Animado
Este es un componente de fondo de gradación de malla dinámica donde los colores cambian y se entremezclan suavemente, implementado usando solo CSS.
Fondo Aurora
Un fantástico efecto de fondo que fluye como una aurora boreal con múltiples filtros y manchas ovaladas animadas. Implementado con CSS puro.
Fondo de Campo de Partículas
Efecto de fondo que genera partículas flotantes mediante animación CSS.
Fondo de Lunares Animado
Este es un componente de fondo que utiliza CSS de gradiente radial para dibujar un patrón de lunares limpio con animación.
Pulsing Status Badge
Una insignia con una animación ondulada (Pulse) que enfatiza que estás en línea o transmitiendo en vivo.
Botón Cyberpunk
Un componente de botón futurista con efectos de neón y animación de fallas que luce genial en un tema oscuro.
Botón con Borde Degradado
Este componente de botón tiene un hermoso borde degradado giratorio al combinar CSS `-webkit-mask-composite` y degradado animado.
Botón de Relleno Líquido
Un botón que se llena de líquido en ondas desde abajo cuando se coloca sobre él
Botón Magnético
Un componente de botón magnético interactivo que sigue suavemente el cursor del mouse como si fuera atraído magnéticamente.
Botón Neumorphism
Un botón estilo Neumorfismo creado puramente con CSS, destacando por su volumen suave y textura tridimensional.
Botón Shimmer
Un hermoso componente de botón que emite una banda de luz (efecto de brillo) al pasar el mouse y periódicamente.
Tarjeta 3D Giratoria
Componente de tarjeta interactivo que gira en el espacio 3D al pasar el mouse
Tarjeta de Perfil Efecto Cristal
Una tarjeta de perfil de usuario elegante y translúcida que utiliza el efecto de vidrio esmerilado (morfismo de vidrio).
Tarjeta Glassmorphism
Componente de tarjeta con un diseño Glassmorphism moderno y elegante, que utiliza efectos de transparencia y desenfoque para simular vidrio esmerilado.
Tarjeta con Brillo de Neón
Este es un componente de interfaz de usuario de tarjeta interactiva donde el borde de la tarjeta se ilumina como una luz de neón cuando se pasa por alto y el foco se mueve según la posición del mouse.
Tarjeta de Precios Animada
Un componente de tarjeta de precios moderno que se resalta al pasar el mouse y tiene una sección de precios animada.
Tarjeta de Contador de Estadísticas
Este es un componente de tarjeta de estadísticas que es ideal para paneles y páginas de destino, ya que los números se animan y cuentan desde cero a medida que se desplaza la página.
carrusel de marquesina infinito
Un componente que permite que logotipos y tarjetas se desplacen horizontalmente sin interrupción.
diseño de mega pie de página
Pie de página grande con enlaces de varias columnas, suscripción al boletín informativo e íconos de redes sociales.
Barra de Búsqueda Animada
Una barra de búsqueda minimalista que se expande suavemente al hacer clic en el icono.
Toggle Switch Personalizado
Implementación de un toggle switch (interruptor) personalizado con animaciones fluidas, diseñado para reemplazar el checkbox nativo del navegador.
Dropzone para Subida de Archivos
Área de carga de archivos moderna con soporte para arrastrar y soltar.
Input con Etiqueta Flotante
Un campo de entrada moderno con un marcador de posición que aparece suavemente como una etiqueta cuando se enfoca.
Formulario Multipaso
Interfaz de usuario que cambia entre varios pasos (con indicador de progreso), utilizada a menudo en pantallas de registro, etc.
Input OTP
Un componente de entrada OTP intuitivo de 6 dígitos que se enfoca automáticamente cuando ingresa un solo carácter y regresa al cuadro anterior con retroceso. También admite pegar.
Medidor de Fuerza de Contraseña
Una interfaz de usuario que muestra visualmente la seguridad de la contraseña ingresada.
Diseño Bento Grid
Un diseño de cuadrícula de caja bento moderno y asimétrico, popular para presentaciones de funciones y paneles.
Diseño Masonry
Hermoso diseño de cuadrícula irregular estilo Pinterest usando columnas CSS
Galería Grid CSS Responsiva
Técnica para construir una galería de imágenes responsiva utilizando auto-fit y minmax en CSS Grid, sin depender de media queries.
Barra Lateral con Encabezado
El diseño básico de una aplicación web moderna con una barra lateral fija a la izquierda y un encabezado en la parte superior. Ideal para pantallas de gestión y productos SaaS.
Spinner de Carga en CSS Puro
Un moderno y elegante spinner de carga creado exclusivamente con conic-gradient y mask de CSS, sin depender de imágenes ni JavaScript.
Loader de Onda de Puntos
Un componente de carga de animación CSS puro que no requiere JavaScript, con 5 puntos ondulados.
Loader de Texto Glitch
Una pantalla de carga de texto con un efecto de falla estilo cyberpunk.
Loader de Barra de Progreso
Este es un componente del cargador que realiza tres tipos de animaciones de la barra de progreso: gradación, franja y pulso usando CSS puro.
Loader de Anillo Pulsante
Un control giratorio de carga con gradación y animación circular que se extiende como ondas.
Skeleton Loader
UI esquelética con ricas animaciones brillantes que se muestran mientras se carga el contenido.
Modal Glassmorphism
Un hermoso diálogo modal parecido al cristal con un fondo borroso.
Migas de Pan
Navegación de ruta de navegación en forma de flecha moderna y hermosa
Navegación de Dock Flotante
Navegación en muelle flotante similar a macOS donde los íconos se expanden cuando se desplazan sobre ellos.
Animación de Menú Hamburguesa
Implementación moderna de un menú hamburguesa con una transición fluida hacia un icono de 'X' utilizando CSS y JavaScript.
Menú Lateral Plegable
Esta es una barra de navegación lateral que se puede usar en paneles, etc., y se puede contraer a un estado de solo íconos.
Barra de Navegación Fija
Un componente de barra de navegación adhesiva que se congela con un efecto de morfismo de vidrio y cambia a un estilo compacto a medida que se desplaza.
Sección de Tarjetas de Características
Sección de tarjeta de presentación de funciones para SaaS/páginas de destino. Un componente de interfaz de usuario de tarjeta con un borde de gradación que brilla suavemente cuando se coloca el cursor sobre ella.
Sección Hero con Fondo de Video
Esta es una sección principal que coloca un video en bucle de fondo para darle un impacto visual.
Sección Hero Dividida
La tipografía y los elementos visuales en negrita se dividen en secciones izquierda y derecha, con una sección de héroe que se desliza al cargar.
Tabla de Precios Responsiva con Tailwind CSS
Componente UI moderno para una sección de precios (Pricing), completamente responsivo e ideal para plataformas SaaS. Construido enteramente con Tailwind CSS.
Slider de Testimonios
Sección deslizante para mostrar un carrusel de reseñas de usuarios
Sección de Línea de Tiempo Vertical
Una línea de tiempo vertical que representa las fases y la historia de un proyecto.
Pestañas con Subrayado Animado
Navegación por pestañas con indicadores subrayados que siguen suavemente las pestañas activas.
Notificación Toast de Éxito
Una notificación emergente que informa al usuario de una operación exitosa.
Tooltip Magnético Animado
Una sofisticada información sobre herramientas animada que sigue suavemente el movimiento del cursor sobre el elemento.
Menú Contextual
Menú contextual personalizado al hacer clic derecho con un diseño enriquecido
Tooltip en CSS Puro
Un tooltip ligero y fluido que aparece al hacer hover, implementado exclusivamente con CSS sin requerir JavaScript.
Menú Popover
Un menú emergente que se abre al hacer clic (o enfocar) y muestra una lista de acciones, en lugar de pasar el mouse.