Aplicando formato a la card

Cuanto me ha encantado maquetar esto, y con TailwindCSS ha sido muy facil.

Kevin Parra Lopez

![](

Abner Batz

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. ★★★★★

Angélica Rocha

no sabía lo de ☆ Gracias profe 😃

Ruben Garcia

Quise crear un sitio para vacaciones

Jefferson Andres Espejo Goez

Me encantó 😄

Luis Glex

Modifiqué un poco el diseño de Víctor y quedó así, soy UI y en verdad es muy sencillo usar tailwind

Stiven Jiménez

No se por que maquetar esta web de hamburguesas me da hambre todo el tiempo.

Carlos Roberto Villatoro Barrios

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:

Anderson Castellon

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">&#x2605;&#x2605;&#x2605;&#x2606;&#x2606;</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;
}```


![sushi.png](https://static.platzi.com/media/user_upload/sushi-a20c94d4-c5df-40f1-9653-411bbe557a7b.jpg)

Khali.S

Excelente todo lo que ha compartido de diseño… ❤️
![](

Nathaly Stefani Riaño Bejarano

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">&starf;&starf;&starf;&starf;&star; / 36 reseñas</div>
    </div>
  </div>
</body>

Israel José Huallpara Mencias

El uso de esta herramienta facilita mucho el diseño personalizado que se quiere lograr realizar para una página, este es el resultado de esta tarea.

Y el enlace al repositorio https://github.com/Berby001/platzi-food/commit/2770859b13fc1f7a5e8b0e2911410197c47e65ce
Saludos…

Jose Guadalupe Luquin Angel

Captura de pantalla 2021-02-25 014653.png

Moises Israel Hernandez Nava

Como dato curioso que les puede ayudar, si están corriendo un servidor de prueba para ver su pagina, pueden verla en su móvil si están en la misma red. Buscan su ip de su equipo donde están programando y en su celular escriben esa ip dos puntos y el puerto que esta corriendo su live server o servidor por defecto es 8080, puede varias si esta ocupado.

Luis Alejandro Vera Hernandez

 <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"> &starf; &starf; &starf; &starf; &star; / 36 reseñas </div>
        </div>

Guillermo Camacho

Excelente curso, tuve algunas dificultades en la instalación pero vale la pena definitivamente!

Sergio Andrés Martínez Ramírez

Qué fácil ha sigo maquetar con Tailwind, sin duda es una herramienta poderosa

Gonzalo Pimentel

No se que tiene pero me encantó maquetar este simple card!

Jose Alvarado

Captura de pantalla 2023-01-10 - 19.54.40.png

Antonio Rafael González Ferrer

Es tan sencillo que da miedo 😆

Victor Manuel Sarria Salinas

recomiendo usar la extension headwind les ayuda a identar las clases.

Rubén Ernesto Aragón Gil

Aranxa Martinez

Así quedo mi card, con esta práctica veo que es un poco más rápido utilizar Tailwind que CSS puro!

Captura de pantalla 2022-07-12 203153.png

juan jose Borrero

<body class="fond-hero">
    <div class="flex flex-row">

        <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-1574026266411-b4256800b9eb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NjV8fG1vaml0b3N8ZW58MHx8MHx8&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">&starf;&starf;&starf;&starf;&star;</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">&starf;&starf;&starf;&starf;&star;</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;
}

Juan Gui Arenas

My Card

__victorisrael__

Excelente clase 🤩️

Diego

Mi card

Madeleine Marcano

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.

Abraham Caso Torres

unsplash.com lo maximo

Diego Alfonso Najera Ortiz

Que facil y lindo!

Christian Andres Moreno Ceballos

Genial, rapido y efectivo super

Terech

Poniendo en practica la clase, gracias.

Jose Morales Varon

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.

Reynaldo Francisco Moreno Briceño

Fui un poco mas y le agregue un boton de ordenar.

Anderson Castellon

John Steven Bernal Gonzalez

Excelente dato de las estrellas, le doy ★★★★★

Naldo Duran