Ejercicio de programación con TailwindCSS: Hover, focus y estado de Tailwind CSS
Código
Aprende a aplicar clases de estado interactivo en Tailwind CSS con este ejercicio de programación. Cambia estilos en botones y campos de entrada con hover, focus y active.
Crea una página HTML simple con CDN que contenga un botón y un campo de entrada de texto. Utiliza Tailwind CSS para aplicar las siguientes clases de estado:
- Hover: Cambia el color de fondo del botón al pasar el cursor sobre él.
- Focus: Cambia el borde del campo de entrada cuando se enfoca.
- Active: Cambia el color de fondo del botón mientras se presiona.
Requisitos:
- El botón debe tener un color de fondo inicial y cambiar a otro color al pasar el cursor sobre él.
- El campo de entrada debe tener un borde inicial y cambiar a otro borde cuando se enfoca.
- El botón debe cambiar de color de fondo mientras se presiona.
Todos los ejercicios de programación de TailwindCSS
Evalúa tus conocimientos con ejercicios de programación en TailwindCSS de tipo Test, Puzzle, Código y Proyecto con VSCode.
Listado y formulario de productos en Tailwind CSS
Proyecto
Flexbox en Tailwind CSS
Puzzle
Contenedores y columnas en Tailwind CSS
Código
Utilidades de espaciado y alineación en Tailwind CSS
Puzzle
Clases de bordes de Tailwind CSS
Código
Evaluación conocimiento Código Tailwind CSS
Código
Evaluación conocimiento Test Tailwind CSS
Test
Clases de colores y fondo de Tailwind CSS
Código
Clases de tamaño de Tailwind CSS
Puzzle
Instalación de Tailwind CSS
Código
Tipografía y fuentes en Tailwind CSS
Puzzle
Proyecto blog de artículos con Tailwind CSS
Proyecto
Transiciones y animaciones de Tailwind CSS
Código
Fundamentos del sistema Utility-First
Test
Grid en Tailwind CSS
Código
Fundamentos del diseño responsive en Tailwind CSS
Código
Introducción a Tailwind CSS
Test
Tutorial para resolver este ejercicio de programación
TailwindCSS
Hover, focus y estado de Tailwind CSS
Clases de utilidad