Cuanto me ha encantado maquetar esto, y con TailwindCSS ha sido muy facil.
Introducción, instalación y ambiente de desarrollo
¿Qué es Tailwind CSS?
Instalación y ambiente de desarrollo
Directivas de Tailwind
Conceptos básicos
Personalización y configuración
Responsive Design, Mobile First y Utility First
Utilerías
Colores
Cómo crear grids o columnas en Tailwind CSS
Dimensiones y Espacios
Cambiando las propiedades de la tipografía
Ajustando el espaciado entre letras y líneas
Display
Flexbox
Crea tus propias utilerías
Entendiendo las variantes y las pseudo-clases
¡Es hora de practicar!
Proyecto: PlatziFood
Creando una card
Aplicando formato a la card
Responsive design en la card
Construye el header
Crea el footer
Crea un banner
Cómo integrar una card
Forms
Directivas de Apply
Extraer componentes
Navbar
Alpine JS
Optimiza tu archivo: PurgeCSS y NanoCSS
Conclusiones
Conclusiones y qué sigue
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 39
Preguntas 1
Cuanto me ha encantado maquetar esto, y con TailwindCSS ha sido muy facil.

Excelente todo lo que ha compartido de diseño… ❤️
</li>
<li class="ml-2">15 ml de zumo de limón</li>
<li class="ml-2">14 hojas de hierbabuena</li>
</ul>
</div>
<div class="text-sm font-light text-gray-700 ml-3 mt-2">COP 34,000.00</div>
<div class="text-sm text-gray-600 leading-snug mb-3">
<span class="text-yellow-400 font-semibold ml-3 mr-2 mt-1">★★★★☆</span>
/ 46 reseñas
</div>
</div>
</div>
</div>
<!-- -->
<div class="bg-transparent mx-4 mb-8">
<div class="mt-4 pl-9">
<div>
<img class="rounded-lg img-port" alt=""
src="https://images.unsplash.com/photo-1632995561645-86a7777d3e7a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjZ8fG1vaml0b3N8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60">
</div>
<div class="relative rounded-lg mx-2 p-2 shadow-lg bg-white w-auto -mt-16">
<h2 class="text-3xl text-center uppercase font-semibold text-gray-800 mb-2 pt-4">mojitos</h2>
<p class="text-gray-700 leading-snug font-light ml-3">El Mojito tiene distintas variaciones de
sabores, ya que a la
mezcla se puede adicionar frutas que se complementen con citricos, como lo es fresa, mango,
lychee, lulo entre otras.
</p>
<div class="text-gray-700 mt-2 p-2 mx-4">
<ul class="font-thin ">Ingredientes
<li class="ml-2">60 ml Ron</li>
<li class="ml-2">15ml Jarabe de azúcar (Almíbar)</li>
<li class="ml-2">15 ml de zumo de limón</li>
<li class="ml-2">14 hojas de hierbabuena</li>
</ul>
</div>
<div class="text-sm font-light text-gray-700 ml-3 mt-2">COP 34,000.00</div>
<div class="text-sm text-gray-600 leading-snug mb-3">
<span class="text-yellow-400 font-semibold ml-3 mr-2 mt-1">★★★★☆</span>
/ 46 reseñas
</div>
</div>
</div>
</div>
</div>
</body>
/* Parte del CSS */
.fond-hero {
background-image: url('https://images.unsplash.com/photo-1585553616435-2dc0a54e271d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NzZ8fGRyaW5rfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60');
background-repeat: no-repeat;
background-size: cover;
height: auto;
}
.img-port{
width: 100%;
height: 50rem;
object-fit: cover;
display: block;
margin: auto;
}
My Card
Excelente clase 🤩️
Mi card
Sé que no es clase de HTML, pero se debería usar html semántico para buenas prácticas. DIV donde podría usar otras etiquetas. Solo una recomendación.
unsplash.com lo maximo
Que facil y lindo!
Genial, rapido y efectivo super
Poniendo en practica la clase, gracias.
Esto de maquetar con tailwind es una pasada total, muy bueno la verdad.
Me gusta mucho la forma en la que se utilizan los elementos y se agregan dentro del DOM así como su forma de manipularse.
Fui un poco mas y le agregue un boton de ordenar.
Excelente dato de las estrellas, le doy ★★★★★
f
Ahí vamos!! Si no se les ve exactamente igual al profe, noten que tiene el zoom al 125%, solo para tenerlo en cuenta, ya que si lo dejan al 100%, se ve ligeramente distinto.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.