No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

0D
17H
10M
7S
Curso de Tailwind CSS 1

Curso de Tailwind CSS 1

V铆ctor Yoalli Dom铆nguez

V铆ctor Yoalli Dom铆nguez

Aplicando formato a la card

17/29
Recursos

Aportes 39

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

![](

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

Modifiqu茅 un poco el dise帽o de V铆ctor y qued贸 as铆, soy UI y en verdad es muy sencillo usar tailwind

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

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)


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

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.

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

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!

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鈥

Es tan sencillo que da miedo 馃槅

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

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

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

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 鈽呪槄鈽呪槄鈽

f

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.