Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprende Desafío: Diseños Responsivos en la Práctica | Adaptabilidad y Personalización
Tailwind CSS para Desarrollo Web

bookDesafío: Diseños Responsivos en la Práctica

Tarea

Completar la estructura HTML proporcionada agregando las clases de Tailwind CSS faltantes según los requisitos del diseño dado.

  • El contenedor debe tener un padding que cambie en diferentes puntos de quiebre;
    • Padding por defecto: p-4;
    • En el punto de quiebre sm: p-6;
    • En el punto de quiebre md: p-8;
    • En el punto de quiebre lg: p-10;
    • En el punto de quiebre xl: p-12.
  • El texto debe tener diferentes colores y tamaños en distintos puntos de quiebre.
    • Tamaño de texto por defecto: text-base, color: text-gray-700;
    • En el punto de quiebre sm: text-lg, color: text-gray-600;
    • En el punto de quiebre md: text-xl, color: text-gray-500;
    • En el punto de quiebre lg: text-2xl, color: text-gray-400;
    • En el punto de quiebre xl: text-3xl, color: text-gray-300.
index.html

index.html

copy
  • Para el contenedor, utilizar p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
  • Para el texto, utilizar text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl text-gray-700 sm:text-gray-600 md:text-gray-500 lg:text-gray-400 xl:text-gray-300.
index.html

index.html

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 2

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you show me where to place these Tailwind classes in the HTML structure?

Do you have a specific element in the HTML that should use these classes?

Would you like an example of the completed HTML structure with the required Tailwind classes?

Awesome!

Completion rate improved to 3.57

bookDesafío: Diseños Responsivos en la Práctica

Desliza para mostrar el menú

Tarea

Completar la estructura HTML proporcionada agregando las clases de Tailwind CSS faltantes según los requisitos del diseño dado.

  • El contenedor debe tener un padding que cambie en diferentes puntos de quiebre;
    • Padding por defecto: p-4;
    • En el punto de quiebre sm: p-6;
    • En el punto de quiebre md: p-8;
    • En el punto de quiebre lg: p-10;
    • En el punto de quiebre xl: p-12.
  • El texto debe tener diferentes colores y tamaños en distintos puntos de quiebre.
    • Tamaño de texto por defecto: text-base, color: text-gray-700;
    • En el punto de quiebre sm: text-lg, color: text-gray-600;
    • En el punto de quiebre md: text-xl, color: text-gray-500;
    • En el punto de quiebre lg: text-2xl, color: text-gray-400;
    • En el punto de quiebre xl: text-3xl, color: text-gray-300.
index.html

index.html

copy
  • Para el contenedor, utilizar p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
  • Para el texto, utilizar text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl text-gray-700 sm:text-gray-600 md:text-gray-500 lg:text-gray-400 xl:text-gray-300.
index.html

index.html

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 2
some-alt