Desafío: Construir Componente de Tarjeta
Tarea
Utilizando Tailwind CSS, crear un componente de tarjeta con los siguientes requisitos:
- La tarjeta debe tener:
- Un ancho máximo de
md; - Esquinas redondeadas;
- Un color de fondo.
- Un ancho máximo de
- La tarjeta debe contener:
- Una imagen que ocupe todo el ancho de la tarjeta;
- Un título con texto en negrita y tamaño de fuente grande;
- Un párrafo con tamaño de fuente base y estilo cursiva.
- Agregar insignias a la tarjeta con:
- Esquinas redondeadas y tamaño de fuente pequeño.
index.html
- Utilizar
max-w-mdpara establecer el ancho máximo de la tarjeta; - Utilizar
roundedpara agregar esquinas redondeadas a la tarjeta; - Utilizar
bg-purple-100para establecer el color de fondo de la tarjeta; - Utilizar
w-fullpara que la imagen ocupe todo el ancho de la tarjeta; - Utilizar
font-boldpara aplicar estilo en negrita al texto; - Utilizar
text-xlpara establecer un tamaño de fuente grande para el título; - Utilizar
text-basepara establecer el tamaño de fuente base para el texto del párrafo; - Utilizar
italicpara aplicar estilo cursiva al texto; - Utilizar
rounded-fullpara agregar esquinas completamente redondeadas a las insignias; - Utilizar
text-smpara establecer el tamaño de fuente pequeño para las insignias.
index.html
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 3. Capítulo 4
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Genial!
Completion tasa mejorada a 3.57
Desafío: Construir Componente de Tarjeta
Desliza para mostrar el menú
Tarea
Utilizando Tailwind CSS, crear un componente de tarjeta con los siguientes requisitos:
- La tarjeta debe tener:
- Un ancho máximo de
md; - Esquinas redondeadas;
- Un color de fondo.
- Un ancho máximo de
- La tarjeta debe contener:
- Una imagen que ocupe todo el ancho de la tarjeta;
- Un título con texto en negrita y tamaño de fuente grande;
- Un párrafo con tamaño de fuente base y estilo cursiva.
- Agregar insignias a la tarjeta con:
- Esquinas redondeadas y tamaño de fuente pequeño.
index.html
- Utilizar
max-w-mdpara establecer el ancho máximo de la tarjeta; - Utilizar
roundedpara agregar esquinas redondeadas a la tarjeta; - Utilizar
bg-purple-100para establecer el color de fondo de la tarjeta; - Utilizar
w-fullpara que la imagen ocupe todo el ancho de la tarjeta; - Utilizar
font-boldpara aplicar estilo en negrita al texto; - Utilizar
text-xlpara establecer un tamaño de fuente grande para el título; - Utilizar
text-basepara establecer el tamaño de fuente base para el texto del párrafo; - Utilizar
italicpara aplicar estilo cursiva al texto; - Utilizar
rounded-fullpara agregar esquinas completamente redondeadas a las insignias; - Utilizar
text-smpara establecer el tamaño de fuente pequeño para las insignias.
index.html
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 3. Capítulo 4