Ejercicio de transiciones y animaciones con Tailwind CSS

Ejercicio de programación: Transiciones y animaciones

Este ejercicio de programación está diseñado para poner a prueba tus conocimientos en TailwindCSS. Es un ejercicio avanzado que pondrá a prueba tus conocimientos expertos.

Tipo: Ejercicio de código 4 minutos estimados 200 puntos de experiencia

Información adicional del ejercicio

Crear un botón con transición suave que cambie de color y tamaño al hacer hover

Contenido del ejercicio

Crea un botón HTML con las clases de Tailwind CSS necesarias para que tenga las siguientes características:

Color de fondo azul (bg-blue-500) por defecto
Color de fondo verde (bg-green-500) al hacer hover
Texto blanco (text-white)
Padding interno (p-4)
Bordes redondeados (rounded)
Una transición suave de 300ms que afecte a todas las propiedades
Función de temporización ease-in-out
Al hacer hover, además del cambio de color, debe escalar al 110% de su tamaño original

El botón debe contener el texto "Haz hover aquí".

Para empezar, crea un elemento <button> y añade las clases de Tailwind CSS una por una según los requisitos. Recuerda que necesitarás:

Clases para el estilo base del botón
Clases para la transición (transition, duration-300, ease-in-out)
Clases para los efectos hover (hover:bg-green-500, hover:scale-110)
La clase transform para que funcione la escala

Lección relacionada

Este ejercicio está relacionado con la lección "Transiciones y animaciones" de TailwindCSS. Te recomendamos revisar la lección antes de comenzar.

Ver lección relacionada

Más ejercicios de TailwindCSS

Explora más ejercicios de programación en TailwindCSS para mejorar tus habilidades y obtener tu certificación.

Ver más ejercicios de TailwindCSS

Solución al ejercicio de programación en TailwindCSS

Contenido bloqueado

¡Desbloquea la solución completa!

Completa el ejercicio de programación en TailwindCSS para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.

solution.js

JavaScript

1 function solveChallenge ( input ) {

2 // Algoritmo optimizado O(n log n)

3 const data = parseInput ( input );

4 const sorted = data . sort (( a , b ) => a - b );

6 // Aplicar técnica de dos punteros

7 let left = 0 , right = sorted . length - 1 ;

8 const result = [];

10 while ( left < right ) {

11 const sum = sorted [ left ] + sorted [ right ];

12 if ( sum === target ) {

13 result . push ([ sorted [ left ], sorted [ right ]]);

14 left ++; right --;

15 } else if ( sum < target ) {

16 left ++;

17 } else {

18 right --;

19 }

20 }

22 return result ;

23 }

Código completo

Explicaciones

Mejores prácticas

+1.200 developers han resuelto este ejercicio de programación

Practica con ejercicios de programación en TailwindCSS

Mejora tus habilidades con cientos de ejercicios de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.

Asistente de IA

Aprende de tus errores

Progreso

Mide tu avance

Certificación

Valida tus habilidades

Comenzar a programar

Únete a miles de desarrolladores mejorando sus habilidades en TailwindCSS

⭐⭐⭐⭐⭐

4.9/5 valoración