Ejercicio responsive en Tailwind CSS código

Descripción

Crea una página HTML simple que demuestre el uso de breakpoints y clases utilitarias en Tailwind CSS para lograr un diseño responsive. La página debe contener un encabezado, un párrafo y una imagen. El diseño debe adaptarse adecuadamente a diferentes tamaños de pantalla utilizando las clases de Tailwind CSS.

Crea un archivo HTML y enlaza Tailwind CSS desde un CDN.
Añade un encabezado de primer nivel que sea visible en todas las pantallas pero que cambie de tamaño según el tamaño de la pantalla. En pantallas pequeñas un 2xl, en pantallas medianas un 4xl y en pantallas grandes un 6xl.
Añade un párrafo que tenga diferentes márgenes según el tamaño de la pantalla. Un margen de 2 unidades en pantallas pequeñas, 4 unidades en pantallas medianas y 6 unidades en pantallas grandes.
Añade una imagen que se ajuste al 100% del ancho en pantallas pequeñas y al 50% en pantallas medianas y mayores.

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