Al hacer los componentes a mano con HTML nos puede ser pesado o poco practico tener que copiar y pegar los estilos una y otra vez.
Es por eso, que en el caso del ejercicio podriamos manejarlo con la extracción, filtrando por si la Card es impar para aplicarle otros filtros.
El códigó HTML de las Cards quedaría de la siguiente manera:
<div class="Card">
<div class="Card--cover bg-norway"></div>
<div class="Card--info">
<p class="Card--info__title">Norway</p>
<p class="Card--info__subtitle">Paisajes increaibles</p>
</div>
</div>
<div class="Card">
<div class="Card--cover bg-new_york"></div>
<div class="Card--info">
<p class="Card--info__title">New York</p>
<p class="Card--info__subtitle">La gran manzana</p>
</div>
</div>
<div class="Card">
<div class="Card--cover bg-yosemite"></div>
<div class="Card--info">
<p class="Card--info__title">Yosemite</p>
<p class="Card--info__subtitle">Una pausa del mundo</p>
</div>
</div>
Y en nuestro taildwind.css:
.Card {
@apply w-48 h-64 shadow-md rounded-lg overflow-hidden flex-none;
}
.Card--cover {
@apply w-full h-3/5 bg-cover;
}
.Card--info {
@apply w-full h-2/5 bg-secondary;
}
.Card--info__title {
@apply text-white font-bold text-xl px-4 py-2;
}
.Card--info__subtitle {
@apply text-white text-base px-4;
}
.Card:nth-child(even) .Card--info {
@apply bg-white;
}
.Card:nth-child(even) .Card--info__title,
.Card:nth-child(even) .Card--info__subtitle {
@apply text-tertiary;
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?