A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso B谩sico de Tailwind

Curso B谩sico de Tailwind

Ana Mar铆a D铆az Solorio

Ana Mar铆a D铆az Solorio

Creando la secci贸n de Recomendados

17/29
Recursos

Aportes 6

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Para las personas que est谩n usando la versi贸n 3 de Tailwind CSS, posiblemente les salga la barra de scroll, tal como se muestra en la imagen.
Si quieren que esa barra se oculte o desaparezca tienen que instalar una dependencia llamada: tailwind-scrollbar-hide

La instalaci贸n e implementaci贸n de dicha extensi贸n est谩 bien detallada en el siguiente enlace: https://www.npmjs.com/package/tailwind-scrollbar-hide

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;
}

SECCI脫N DE RECOMENDADOS

Yo decid铆 usar la propiedad shrink-0 para evitar que las tarjetas se encojan cuando hay poco texto, dado que cada card tiene definido un width de 48 pues menos de eso no va a tener gracias a shrink-0

Adicional dejo mi c贸digo para hacer que las tarjetas pares e impares tengan background y texto diferente.

.card {
    @apply w-48 h-64 shadow-md rounded-lg shrink-0 snap-center
}
.card-details {
    @apply w-full h-2/5 rounded-b-lg flex flex-col justify-center gap-2 p-4
}

.card:nth-child(even) {
    @apply bg-white text-tertiary
}
.card:nth-child(odd) {
    @apply bg-secondary text-white
}

Mis recomendaciones:

El codigo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Platzi Travel</title>
    <link rel="stylesheet" href="./css/styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&family=Raleway:[email protected]&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <nav></nav>
    <div id="鈥渢ab_bar鈥"></div>
    <section class="w-full h-screen">
      <div id="home" class="w-full h-2/4 overflow-hidden relative">
        <div
          class="w-full h-full absolute flex flex-col justify-between items-center py-10"
        >
          <input
            class="w-3/4 text-center p-3 rounded-full shadow-2xl outline-none"
            type="text"
            placeholder="San Francisco"
          />
          <button
            class="w-48 font-semibold bg-white p-2 rounded-full text-primary"
          >
            Explore More
          </button>
        </div>
        <div class="w-full h-full">
          <img
            class="w-full h-full"
            src="./img//sanFrancisco.jpg"
            alt="San Francisco"
          />
        </div>
      </div>
      <div id="recomended" class="p-3">
        <h2 class="text-primary font-semibold text-2xl">Our Recomendations</h2>
        <div
          class="w-auto h-auto flex space-x-5 overflow-x-auto overscroll-x-contain mt-5 pb-4"
        >
          <div class="Card">
            <div class="Card-image bg-norway"></div>
            <div class="Card-content">
              <p class="Card-title">Norway</p>
              <p class="Card-text">Beautiful landscape</p>
            </div>
          </div>
          <div class="Card">
            <div class="Card-image bg-new_york"></div>
            <div class="Card-content">
              <p class="Card-title">Norway</p>
              <p class="Card-text">Beautiful landscape</p>
            </div>
          </div>
          <div class="Card">
            <div class="Card-image bg-norway"></div>
            <div class="Card-content">
              <p class="Card-title">Norway</p>
              <p class="Card-text">Beautiful landscape</p>
            </div>
          </div>
        </div>
      </div>
      <div id="鈥渞entas_destacadas鈥"></div>
    </section>
    <footer></footer>
  </body>
</html>