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
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
Aplicando formato a la card
17/29Recursos
Aportes 31
Preguntas 1
Ordenar por:
Una practica que @Victor Yoalli Dominguez ha aprendido como diseñador es que; el negro es muy fuerte para la vista, cuando se está leyendo. ★★★★★
Me encantó 😄
no sabía lo de ☆ Gracias profe 😃
Quise crear un sitio para vacaciones
No se por que maquetar esta web de hamburguesas me da hambre todo el tiempo.
Modifiqué un poco el diseño de Víctor y quedó así, soy UI y en verdad es muy sencillo usar tailwind
Resultado realizado en Angular
<article class="product-card">
<img class="product-card__image" [src]="image" alt="Card image">
<div class="product-card__content">
<h2 class="product-card__title">{{ title }}</h2>
<p class="product-card__description">{{ description }}</p>
<p class="product-card__price">{{ price }} USD$</p>
<span class="product_card__rate">★★★☆☆</span>
<span class="product-card__reviews">{{ reviews }} reseñas</span>
</div>
</article>
.product-card {
@apply max-w-xs;
@apply mx-auto;
@apply mt-4;
@apply flex;
@apply flex-col;
@apply items-center;
}
.product-card__image {
@apply rounded-2xl;
@apply shadow-xl;
}
.product-card__content {
@apply bg-white;
@apply rounded-lg;
@apply shadow-2xl;
@apply p-2;
@apply inline-block;
@apply -mt-4;
@apply mx-3;
}
.product-card__title {
@apply text-2xl;
@apply font-semibold;
@apply text-gray-700;
@apply tracking-tight;
}
.product-card__description {
@apply text-sm;
@apply text-gray-500;
@apply leading-snug;
@apply my-2;
}
.product-card__price {
@apply text-base;
@apply text-gray-600;
@apply font-bold;
@apply uppercase;
}
.product_card__rate {
@apply text-lg;
@apply tracking-tight;
@apply text-yellow-400;
}
.product-card__reviews {
@apply text-xs;
@apply text-gray-500;
@apply ml-1;
}```
Excelente todo lo que ha compartido de diseño… ❤️
Me gusta que comparta los conocimientos que ha aprendido del diseño! 💚
<body class="min-h-screen bg-gray-400 m-4">
<div>
<div>
<img
class="rounded-lg"
src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&h=500&q=80"
alt="Hamburger"
/>
</div>
<div class="bg-white rounded-lg shadow-lg relative -mt-2 mx-2 p-2">
<h2 class="text-xl tracking-tight uppercase font-semibold text-gray-900">
Hamburguesa con Queso
</h2>
<p class="text-gray-700 leading-snug">Hamburguesa con queso y aderezo de chipotle</p>
<div class="my-2 text-sm font-semibold text-gray-700">MXN $15</div>
<div class="text-yellow-600">★★★★☆ / 36 reseñas</div>
</div>
</div>
</body>
<div class="relative shadow-lg mx-2 p-2 bg-white rounded-lg -mt-2"> <!-- relative para colocarlo encima, shadow para aplicar efecto de sombra p de padding, mx-2 para que haya una separacion con los bordes -->
<h2 class="flex justify-center text-xl tracking-tight uppercase font-semibold text-gray-900">Hamburger Cheese</h2>
<p class="text-gray-700 leading-snug"> Hamburguesa de queso con champiñones y carne</p> <!-- con leading snug se lo junta un poquito con el titulo -->
<div class="mt-2 text-sm font-semibold text-gray-700"> $2.50 USD </div>
<!-- agregar estrellas -->
<div class=" mt-2 text-xs text-yellow-700"> ★ ★ ★ ★ ☆ / 36 reseñas </div>
</div>
Excelente curso, tuve algunas dificultades en la instalación pero vale la pena definitivamente!
Me puse a practicar un rato con las fuentes y con las dimensiones y me gusto el resultado y la facilidad con que se manejan con TailwindCSS:
Qué fácil ha sigo maquetar con Tailwind, sin duda es una herramienta poderosa
No se que tiene pero me encantó maquetar este simple card!
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 ★★★★★
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? Crea una cuenta o inicia sesión.