Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Tailwind CSS 2020

Curso de Tailwind CSS 2020

Víctor Yoalli Domínguez

Víctor Yoalli Domínguez

Cómo integrar una card

22/29
Recursos

Aportes 20

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

En esta clase, en el minuto 8:00 en lugar de darle un margin a alguno de los elementos convendría mejor usar un grid-gap, ya que esto le da espacio a los hijos del container por igual y no a uno con respecto a otro. Lo veo mejor.

Lo aprendí del curso de Responsive Design de Leonidas Esteban.

Ya solucione para que pueda meterle todas las cards que quiera y se acomoden solas y dejen un espacio en el centro sin usar margins, denle a cada card un md:5/12 en lugar de 1/2 y en el div que contiene las card le agregan md:flex md:justify-around y md:flex-wrap

Wenas a [email protected];

Asi llevo el proyecto, tailwind es una pasado.

Saludos.

Practica de integración card.

Aquí vamos !!! Con algunas modificaciones leves jeje

Cards

 <!-- CARD -->
        <div class="container mx-auto md:flex">

            <div class= "mx-2 mt-4 rounded-lg md:mx-auto md:w-5/12 md:flex md:justify-around md:flex-wrap md:bg-white">
                <div>
                    <img class="md:h-full object-cover md:w-48 rounded-lg md:rounded-r-none" 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"> <!-- object cover para que ocupe la imagen todo el espacio en vertical -->
                </div>
        
                <div class="relative shadow-lg mx-2 p-2 bg-white rounded-lg -mt-2 md:bg-transparent"> <!-- 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 md:text-lg">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>
            </div>

            <!-- SECOND CARD -->

            <div class= "mx-2 mt-4 rounded-lg md:mx-auto md:w-5/12 md:flex md:justify-around md:flex-wrap md:bg-white">
                <div>
                    <img class="md:h-full object-cover md:w-48 rounded-lg md:rounded-r-none" 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"> <!-- object cover para que ocupe la imagen todo el espacio en vertical -->
                </div>
        
                <div class="relative shadow-lg mx-2 p-2 bg-white rounded-lg -mt-2 md:bg-transparent"> <!-- 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 md:text-lg">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>
            </div>

        </div> 

Vamos bien:

Codigo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <title>Platzi Food | Home</title>
</head>
<body class="bg-gray-300">
    <header>
        <div class="flex justify-between items-center px-2 bg-secondary text-white">
            <div>
                <img class="h-8 py-1" src="images/logo-w.svg" alt="Platzi Food">
            </div>
            <div class="text-2xl">&equiv;</div>
        </div>
    </header>
    <main>
        <div class="h-48 md:h-64 lg:h-80 bg-cover bg-bottom bg-center bg-no-repeat" style="background-image: url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');"></div>
        <div class="container md:flex md:mx-auto">
            <div class="mx-2 mt-4 rounded md:w-1/2 md:flex md:bg-white md:rounded-lg">
                <div>
                    <img class="rounded-lg md:rounded-r-sm md:w-full" src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&h=500&q=60" alt="Hamburger">
                </div>
                <div class="relative shadow-lg bg-white md:bg-transparent md:shadow-none md:my-auto rounded-lg  mx-2 -mt-4 p-2">
                    <h2 class="tracking-tight font-semibold md:text-md text-gray-900 uppercase">Cheese Hamburger</h2>
                    <p class="text-gray-700 md:text-xs leading-snug">Cheese Hambuerger with meat, tomatoes and a lot of delicious cheese.</p>
                    <div class="text-sm mt-2 font-semibold text-gray-700">3.99 USD$</div>
                    <div class="text-yellow-700 mt-2 text-xs">&starf;&starf;&starf;&starf;&star; | 47 reviews</div>
                </div>
            </div>
            <div class="mx-2 mt-4 rounded md:w-1/2 md:flex md:bg-white md:rounded-lg">
                <div>
                    <img class="rounded-lg md:rounded-r-sm md:w-full" src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&h=500&q=60" alt="Hamburger">
                </div>
                <div class="relative shadow-lg bg-white md:bg-transparent md:shadow-none md:my-auto rounded-lg  mx-2 -mt-4 p-2">
                    <h2 class="tracking-tight font-semibold md:text-md text-gray-900 uppercase">Cheese Hamburger</h2>
                    <p class="text-gray-700 md:text-xs leading-snug">Cheese Hambuerger with meat, tomatoes and a lot of delicious cheese.</p>
                    <div class="text-sm mt-2 font-semibold text-gray-700">3.99 USD$</div>
                    <div class="text-yellow-700 mt-2 text-xs">&starf;&starf;&starf;&starf;&star; | 47 reviews</div>
                </div>
            </div>
        </div>
    </main>
    <footer class="md:absolute lg:flex-row-reverse md:items-center lg:flex lg:justify-between bottom-0 w-full bg-secondary text-white">
        <div class="mt-4 md:mb-4 flex justify-center items-center">
            <div class="mx-2 hover:text-blue-700"><i class="fa fa-facebook"></i> Platzi Food</div>
            <div class="mx-2 hover:text-blue-500"><i class="fa fa-twitter"></i> @platzifood</div>
            <div class="mx-2 hover:text-pink-500"><i class="fa fa-instagram"></i> @platzifood</div>
        </div>
        <div class="mt-4 md:mb-4">
            <ul class="flex justify-center items-center">
                <li class="mx-2">About us</li>
                <li class="mx-2">Support</li>
                <li class="mx-2">Registry</li>
                <li class="mx-2">Privacy</li>
            </ul>
        </div>
    </footer>
</body>
</html>```

Se puede usar GridCSS para ubicar los productos, hay un curso de ello y bien explicado en Platzi

Creo que hace falta mejor un grid system para colocar las cards y en lugar de agregar todos los estilos a las cards sería mejor crear un componente que nos ayude a hacerlo más rápido y modulado.

lo malo es que si le agrego mas cards no se acomodan solos 😕

Mi PlatziFood:

Wua! esta quedando perfecto!

Esta bacán maquetar con Tailwind!!!

Tuve un problema con el h-full de la imagen cuando pasa a md, lo que hice fué asignar el width y heigth que queria en el contenedor y la imagen la dejé como w-full y h-full

Antes:

      <div class="mx-2 md:mx-0 md:w-1/2 mt-4 rounded-lg md:flex md:bg-white md:shadow-lg md:items-center">
        <div class="w-full md:w-48 md:h-full">
          <img class="w-full h-full object-cover object-left rounded-lg md:rounded-r-none" src="https://images.unsplash.com/photo-1565060299509-453c4f3bc905?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&h=500&q=80" alt="">
        </div>
        <div class="relative mx-2 p-2 shadow-lg bg-white rounded-lg -mt-2 md:bg-transparent md:shadow-none">
          <h2 class="text-xl tracking-tight font-semibold uppercase text-gray-900 md:text-lg">hamburguesa con queso</h2>
          <div class="text-gray-700 leading-snug">Hamburguesa con queso y aderezo de chipotle</div>
          <div class="mt-2 text-sm font-semibold text-gray-700">MXN $15.00</div>
          <div class="mt-2 text-xs text-yellow-700">&starf;&starf;&starf;&starf;&starf; 36 reseñas</div>
        </div>
      </div>

Después:

<div class="mx-2 md:mx-0 md:w-1/2 mt-4 rounded-lg md:flex md:bg-white md:shadow-lg md:items-center">
        <div class="w-full md:w-48 md:h-full">
          <img class="w-full h-full object-cover object-left rounded-lg md:rounded-r-none" src="https://images.unsplash.com/photo-1565060299509-453c4f3bc905?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&h=500&q=80" alt="">
        </div>
        <div class="relative mx-2 p-2 shadow-lg bg-white rounded-lg -mt-2 md:bg-transparent md:shadow-none">
          <h2 class="text-xl tracking-tight font-semibold uppercase text-gray-900 md:text-lg">hamburguesa con queso</h2>
          <div class="text-gray-700 leading-snug">Hamburguesa con queso y aderezo de chipotle</div>
          <div class="mt-2 text-sm font-semibold text-gray-700">MXN $15.00</div>
          <div class="mt-2 text-xs text-yellow-700">&starf;&starf;&starf;&starf;&starf; 36 reseñas</div>
        </div>
      </div>

Ejemplo de tailwind para extender los tamaños

Asi vamos!!!

f