¡Es hora de practicar!

Resultado del Reto:

HTML


	<h1 class="text-2xl mt-10">Colores y Dimensiones</h1>
	<button class="bg-blue-800 text-blue-200 py-2 px-5 mt-5 rounded w-full sm:w-48">
		Submit
	</button>

	<h1 class="text-2xl mt-10">Display y Flexbox</h1>
	<div class="flex flex-wrap">
		<button class="bg-blue-800 text-blue-200 py-2 px-5 ml-5 mt-5 rounded w-full sm:w-48">
			Submit
		</button>
		<button class="bg-blue-800 text-blue-200 py-2 px-5 ml-5 mt-5 rounded w-full sm:w-48">
			Submit
		</button>
		<button class="bg-blue-800 text-blue-200 py-2 px-5 ml-5 mt-5 rounded w-full sm:w-48">
			Submit
		</button>
	</div>

	
	<h1 class="text-2xl mt-10">Pseudo—Class Variants</h1>
	<p>Nota: en Variants se agrega 'active' a backgroundColor y textColor</p>
	<div class="flex flex-wrap">
		<button class="hover:bg-blue-800 hover:text-blue-200 active:bg-blue-600 focus:bg-blue-800 focus:text-blue-200 focus:outline-none focus:shadow-outline bg-blue-200 text-blue-800 py-2 px-5 ml-5 mt-5 rounded w-full sm:w-48">
			Submit
		</button>
		<button class="hover:bg-blue-800 hover:text-blue-200 active:bg-blue-600 focus:bg-blue-800 focus:text-blue-200 focus:outline-none focus:shadow-outline bg-blue-200 text-blue-800 py-2 px-5 ml-5 mt-5 rounded w-full sm:w-48">
			Submit
		</button>
		<button class="hover:bg-blue-800 hover:text-blue-200 active:bg-blue-600 focus:bg-blue-800 focus:text-blue-200 focus:outline-none focus:shadow-outline bg-blue-200 text-blue-800 py-2 px-5 ml-5 mt-5 rounded w-full sm:w-48">
			Submit
		</button>
	</div>


	<h1 class="text-2xl mt-10">Extraer componentes usando @apply</h1>
	<div class="flex flex-wrap">
		<div class="alert alert-default">
			Este mensaje es una alerta default.
		</div>
		
		<div class="alert alert-danger">
			Este mensaje es una alerta danger.
		</div>
		
		<div class="alert alert-warning">
			Este mensaje es una alerta warning.
		</div>
		
		<div class="alert alert-info">
			Este mensaje es una alerta info.
		</div>
	</div>

TailwindCSS


.alert {
  @apply py-2 px-4 mt-5 ml-5 rounded;
}
.alert-default {
  @apply bg-gray-100 text-gray-700 border border-gray-400;
}
.alert-danger {
  @apply bg-red-100 text-red-700 border border-red-400;
}
.alert-warning {
  @apply bg-orange-100 text-orange-700 border border-orange-400;
}
.alert-info {
  @apply bg-blue-100 text-blue-700 border border-blue-400;
}

Fernando Mejia

Ojo recordar que las directivas @apply deben ir antes de agregar las utilities en el archivo tailwind.css

@tailwind base;

@tailwind components;

.btn-blue {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
.btn-blue:hover {
    @apply bg-blue-700;
}

.btn-red {
    @apply bg-red-800 text-white font-bold py-2 px-4 rounded;
}
.btn-red:hover {
    @apply bg-red-900;
}

.alert {
    @apply bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 m-32;
}
.alert-warning {
    @apply bg-yellow-100 text-yellow-700 border-yellow-500;
}
.alert-info {
    @apply bg-indigo-100 text-indigo-700 border-indigo-500;
}
.alert-danger {
    @apply bg-red-100 text-red-700 border-red-500;
}
.alert-success {
    @apply bg-green-100 text-green-700 border-green-500;
}


@tailwind utilities;

Sabino Fernández

Me gusta Tailwind, pero creo que son muchas clases las que al final se terminan aplicando sobre un elemento, aunque imagino que para eso existe @apply y evitar que el HTML se sobre cargue. Mis retos:

mobile:

desktop:

HTML:

<body class="flex flex-col">
  <h1 class="font-bold text-center mt-2">Reto 1 🥇</h1>
  <div class="flex flex-col md:flex-row justify-center m-10 mt-6">
    <button class="btn bg-green-300 md:w-1/4 active:btn-active">
      ¡No me toques!
    </button>
  </div>

  <h1 class="font-bold text-center mt-2">Reto 2 🥈</h1>
  <div class="flex flex-col md:flex-row md:justify-around m-10 mt-6">
    <button class="btn bg-blue-300 md:w-1/4 active:btn-active">
      ¡Toca aquí!
    </button>
    <button class="btn bg-red-300 md:w-1/4 active:btn-active">
      ¡Toca allá!
    </button>
    <button class="btn bg-orange-300 md:w-1/4 active:btn-active">
      ¡Toca lejos!
    </button>
  </div>

  <h1 class="font-bold text-center mt-2">Reto 3 🥉</h1>
  <div class="flex flex-col md:items-center m-10 mt-6">
    <button class="alert neutral md:w-3/4 active:btn-active">
      Something neutral happened.
    </button>
    <button class="alert bad md:w-3/4 active:btn-active">
      Something bad happened.
    </button>
    <button class="alert strange md:w-3/4 active:btn-active">
      Something strange happened.
    </button>
    <button class="alert good md:w-3/4 active:btn-active">
      Something good happened.
    </button>
    <button class="alert information md:w-3/4 active:btn-active">
      This is information.
    </button>
  </div>
</body>

Tailwind CSS:


.neutral {
@apply text-gray-700 bg-gray-300 border-gray-700
}

.bad {
@apply text-red-700 bg-red-300 border-red-700
}
.strange {
@apply text-orange-700 bg-orange-300 border-orange-700
}
.good {
@apply text-blue-700 bg-blue-300 border-blue-700
}
.information {
@apply text-green-700 bg-green-300 border-green-700
}

.alert {
@apply mb-2 p-2 rounded-md border-solid border-2
}

.btn {
  @apply p-2 text-black rounded
}

Jhon Michael Garcia Cuellar

Reto completado! osiosi

Codigo HTML

Codigo Tailwind

Configuración Tailwind

Juan Esteban García Giraldo

Felipe de Jesús Galindo Aguilar

Soy pésimo para esto de la diseñada. Pero ahí voy.

John Ruiz

Wenas a tod@s;

Aquí mi reto:

Me ayudé con los ejemplos de los compañeros.

Saludos.

Ezequiel Rodriguez Esparza

Así quedo el reto:

Captura de Pantalla 2022-07-19 a la(s) 1.14.16 p.m..png

Carlos Roberto Villatoro Barrios

Resultado de mi reto:

Captura de pantalla 2021-04-06 125157.png

David Constante

Como diria Patricio Estrella “Hice todo lo que pude”

Christian Alvarenga

La parte de @apply no logre entender lastimosamente pero, dejo hasta donde pude realizar el ejercicio. Si alguien me puede indicar la manera de como usar correctamente y en que carpeta debe ir el @apply se lo agradecería.

<!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>Practicas</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>

    <h1 class="text-center font-mono text-xl pt-8">TailwindCSS</h1>
    <div>
      <div class="mt-10 py-1 border-t border-b border-gray-800">
        <h2 class="mx-auto max-w-max mb-3 text-lg font-semibold border-b-2 border-gray-400">Colores y Dimensiones</h2>
        <button class="block mx-auto bg-blue-600 h-8 w-full sm:w-5/6 md:w-2/6 text-blue-200 rounded" type="submit">Enviar</button>
      </div>

      <div class="mt-8 py-1 border-t border-b border-gray-800">
        <h2 class="mx-auto max-w-max mb-3 text-lg font-semibold border-b-2 border-gray-400">Display y Flexbox</h2>
        <div class="w-30 flex justify-evenly">
          <button class="bg-blue-600 text-blue-200 rounded w-1/6 h-8" type="submit">Enviar</button>
          <button class="bg-blue-600 text-blue-200 rounded w-1/6 h-8" type="submit">Enviar</button>
          <button class="bg-blue-600 text-blue-200 rounded w-1/6 h-8" type="submit">Enviar</button>
        </div>
      </div>

      <div class="mt-8 py-1 border-t border-b border-gray-800">
        <h2 class="mx-auto max-w-max mb-3 text-lg font-semibold border-b-2 border-gray-400">Pseudo—Class Variants</h2>
        <div class="w-30 flex justify-evenly">
          <button class="bg-blue-600 text-blue-200 rounded w-1/6 h-8 hover:bg-blue-800 hover:text-white" type="submit">Enviar</button>
          <button class="bg-blue-600 text-blue-200 rounded w-1/6 h-8 hover:bg-blue-800 hover:text-white" type="submit">Enviar</button>
          <button class="bg-blue-600 text-blue-200 rounded w-1/6 h-8 hover:bg-blue-800 hover:text-white" type="submit">Enviar</button>
        </div>
      </div>

    </div>
  </body>
</html>

Cristian Oswaldo Sacta Martos

Ahi se los dejo

Guillermo Camacho

Reto finish!!

Abril Darynka Tapia Sosa

**Reto completado **
![](
![](

Código
ejercicio.html

<div class="m-10 bg-gray-100 flex justify-center ">
       <button class="px-2 py-4 bg-blue-800 text-blue-200 font-bold rounded-lg md:w-44 sm:w-56 w-full">
           Sectumsempra -- ⚡
        </button>
    </div>
    <div class="m-10 bg-blue-100 flex flex-col justify-center items-center	">
        <p class="font-bold	uppercase text-xl">Display y Flexbox</p>
        <div class="flex justify-center items-center gap-6 my-5 flex-wrap">
            <button class="px-2 py-4 bg-blue-800 text-blue-200 font-bold rounded-lg md:w-44 sm:w-56 w-full hover:change-color">
                Bombarda
            </button>
            <button class="px-2 py-4 bg-blue-800 text-blue-200 font-bold rounded-lg md:w-44 sm:w-56 w-full hover:change-color">
                Lumus
            </button>
            <button class="px-2 py-4 bg-blue-800 text-blue-200 font-bold rounded-lg md:w-44 sm:w-56 w-full hover:change-color">
                Nox
            </button>
        </div>
    </div>
    <div class="m-10 bg-blue-100 flex flex-col justify-center items-center">
        <p class="font-bold	uppercase text-xl">Alert</p>
        <div class="flex justify-center items-center gap-6 my-5 flex-wrap w-full px-8"> 
            <div class="alert default">
                Default
            </div>
            <div class="alert danger">
                Danger
            </div>
            <div class="alert warning">
                Warning
            </div>
            <div class="alert info">
                Info
            </div>
        </div>
    </div>

tailwind.css

@variants hover{
    .zoom {
        transform: scale(2); 
    }
    .change-color{
        background: rgb(157,132,183);
        color: rgb(112,11,151);
    } 
}

.alert{
    @apply w-full  border-solid border-2  px-1 py-2 text-center font-bold;
}
.default{
    @apply bg-gray-200 border-gray-400
}
.danger{
    @apply bg-red-200 border-red-400
}
.warning{
    @apply bg-yellow-200 border-yellow-400
}
.info{
    @apply bg-blue-200 border-blue-400
}

Daniel Jonguitud

Colores y Dimesiones:

<div class="flex mt-20 justify-center">
      <button class="btn w-full lg:w-1/2 bg-blue-900">
        <span class="text-blue-100">Botón</span>
      </button>
    </div>

Display y Flexbox, Pseudo—Class Variants:

div class="flex flex-wrap mt-2">
        <button class="active:bg-black hover:bg-green-900 w-full sm:w-1/3 p-4 bg-green-500 border">
            <span class="hover:text-green-400 text-green-100">Botón</span>
        </button>
        <button class="active:bg-blue-800 hover:bg-yellow-800 w-full sm:w-1/3 p-4 bg-red-800 border">
            <span class="text-red-100">Botón</span>
        </button>
        <button class="active:bg-blue-800 hover:bg-green-800 w-full sm:w-1/3 p-4 bg-yellow-800 border">
            <span class="text-yellow-100">Botón</span>
        </button>
        </div>

Extraer componentes usando @apply:

.alert {
    @apply font-bold mx-10 my-10 p-10 border-4;
}

.alert-default {
    @apply bg-gray-500 text-gray-100;
}

.alert-danger {
    @apply bg-red-500 text-gray-100;
}

.alert-warning {
    @apply bg-yellow-500 text-gray-100;
}

.alert-info {
    @apply bg-blue-500 text-gray-100;
}

Edgar Roy Huaman Pumachapi

hace un año

MI aporte pequeño

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio</title>
    <link rel="stylesheet" href="./../dist/style.css">
    <link rel="stylesheet" href="./css/all.css">

</head>
<body>
      <div class="mx-auto bg-yellow-200   flex flex-col items-center p-10  " >
        <h1 class="text-yellow-600 text-xl font-bold">Reto 1: Colores y Dimensiones <i class="fa-solid fa-bullseye"></i></h1>
        <button class=" bg-blue-500 w-full sm:w-32 md:w-40 lg:w-60 font-medium text-white mt-4 
        text-sm p-2 rounded">Presionar</button>
        
        <h1 class="text-yellow-600 text-xl font-bold mt-8">Reto 2: Display y Flexbox   <i class="fa-solid fa-bullseye"></i></h1>
        <div class="flex w-full flex-col sm:flex-row items-center justify-center sm:gap-4 ">
          <button class=" bg-blue-500 w-full sm:w-32 md:w-40 lg:w-60 font-medium text-white mt-4 
        text-sm p-2 rounded">Presionar 1</button>
          <button class=" bg-blue-500 w-full sm:w-32 md:w-40 lg:w-60 font-medium text-white mt-4 
        text-sm p-2 rounded">Presionar 2</button>
          <button class=" bg-blue-500 w-full sm:w-32 md:w-40 lg:w-60 font-medium text-white mt-4 
        text-sm p-2 rounded">Presionar 3</button>
        </div>

        <h1 class="text-yellow-600 text-xl font-bold mt-8">Reto 3: Pseudo—Class Variants <i class="fa-solid fa-bullseye"></i></h1>

        <div class="flex w-full flex-col sm:flex-row items-center justify-center sm:gap-4 ">
          <button class="change-color bg-blue-500 w-full sm:w-32 md:w-40 lg:w-60 font-medium text-white mt-4 
        text-sm p-2 rounded">Presionar 1</button>
          <button class="change-color bg-blue-500 w-full sm:w-32 md:w-40 lg:w-60 font-medium text-white mt-4 
        text-sm p-2 rounded">Presionar 2</button>
          <button class="change-color bg-blue-500 w-full sm:w-32 md:w-40 lg:w-60 font-medium text-white mt-4 
        text-sm p-2 rounded">Presionar 3</button>
        </div>

        <h1 class="text-yellow-600 text-xl font-bold mt-8">Reto 4: Extraer componentes usando @apply <i class="fa-solid fa-bullseye"></i></h1>
        <div class = "alert">
          Este mensaje es una alerta default.
        </div>
        
        <div class = "alert alert-danger">
          Este mensaje es una alerta danger.
        </div>
        
        
        <div class = "alert alert-warning">
          Este mensaje es una alerta warning.
        </div>
        
        <div class = "alert alert-info">
          Este mensaje es una alerta info.
        </div>
      </div>
</body>
</html>

source css

@tailwind base;
@tailwind components;
@tailwind utilities;




@layer utilities{
    .zoom:hover{
        transform: scale(2);
    }

    .change-color:hover{
        background-color: #172554;
    }

    .rotate-45{
        transform: rotate(45deg);
        
    }
    
}

@layer components{
    body{
        font-size: 62.5%;
    }
    .alert{
        border-width: 1px;
        border-left-width: 0.5rem;
        border-right-width: 0.5rem;
        border-style: solid;
        padding: 0.5rem 2rem;
        margin: 1rem;
        width: 30rem;
        font-size: 0.8rem;
        font-weight: 400;
        border-color: rgb(233, 231, 231);
        color: rgb(214, 190, 190);
        background-color: rgb(223, 211, 211);
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    .alert-danger{
        border-color: rgb(243, 101, 101);
        color: rgb(225, 66, 66);
        background-color: rgb(229, 147, 147);
    }

    .alert-warning{
        border-color: rgb(246, 197, 104);
        color: rgb(255, 166, 0);
        background-color: rgb(242, 214, 162);
    }

    .alert-info{
        border-color: skyblue;
        color: rgb(82, 173, 209);
        background-color: rgb(175, 208, 221);
    }
}

Marco Antonio Alducin Garcia

hace un año

Pues esta aca mi resultado.

Yo igual segui uno que otro comentario.

<span>Colores y Dimensiones</span>
    <br>
    <button class="bg-blue-900 text-gray-200 text-center p-2 w-80 mx-8 sm:mx-20 sm:w-3/4 md:mx-32 md:w-4/6 lg:mx-40 xl:mx-72 xl:w-7/12
    ">Hola</button>
    <br>
    <br>
    <span>Display y Flexbox</span>
    <br>
    <div class="flex flex-row">
        <button class="bg-blue-900 text-gray-200 text-center p-2 w-1/3 mx-8">Hola</button>
        <button class="bg-blue-900 text-gray-200 text-center p-2 w-1/3 mx-8">Hola</button>
        <button class="bg-blue-900 text-gray-200 text-center p-2 w-1/3 mx-8">Hola</button>
    </div>
    <br>
    <br>
    <span>Pseudo—Class Variants</span>
    <br>
    <div class="flex flex-row">
        <button class="border-2 border-blue-500 text-center p-2 w-1/3 mx-8 hover:bg-orange-900 hover:text-stone-300 hover:border-0 active:border-0 active:bg-yellow-200 active:text-yellow-950">Hola</button>
        <button class="border-2 border-blue-500 text-center p-2 w-1/3 mx-8 hover:bg-orange-900 hover:text-stone-300 hover:border-0 active:border-0 active:bg-yellow-200 active:text-yellow-950">Hola</button>
        <button class="border-2 border-blue-500 text-center p-2 w-1/3 mx-8 hover:bg-orange-900 hover:text-stone-300 hover:border-0 active:border-0 active:bg-yellow-200 active:text-yellow-950">Hola</button>
    </div>
    <br>
    <br>
    <span>Pseudo—Class Variants</span>
    <div class="flex flex-col m-2">
        <div class="alert alert-success">Este mensaje es una alerta <span class="font-bold">Success</span></div>
        <div class="alert alert-info">Este mensaje es una alerta <span class="font-bold">Info</span></div>
        <div class="alert alert-warning">Este mensaje es una alerta <span class="font-bold">Warning</span></div>
        <div class="alert alert-danger">Este mensaje es una alerta <span class="font-bold">Danger</span></div>
        <div class="alert alert-default">Este mensaje es una alerta <span class="font-bold">Default</span></div>
    </div>


@layer components {
    .cerca{
        background-color: #723400;
        color: #FFE2CB;
        border: #723400 1px solid;
    }
    .activo{
        background-color: #E9E977;
        color: #2C2C00;
        border: #E9E977 1px solid;
    }
    .alert{
        @apply w-full mb-2 p-4 border-4 text-center;
    }
    .alert-default{
        @apply bg-white text-gray-900 border-gray-200;
    }
    .alert-success{
        @apply bg-[#dff0d8] text-[#3c763d] border-[#d6e9c6];
    }
    .alert-info{
        @apply bg-[#d9edf7] text-[#31708f] border-[#bce8f1];
    }
    .alert-warning{
        @apply bg-[#fcf8e3] text-[#8a6d3b] border-[#faebcc];
    }
    .alert-danger{
        @apply bg-[#f2dede] text-[#a94442] border-[#ebccd1];
    }
}

Israel José Huallpara Mencias

Hola !!!
Esta es mi solución del reto

Y el código se encuentra en mi repositorio del proyecto… https://github.com/Berby001/platzi-food/tree/practica1
Saludos…

Antonio Rafael González Ferrer

html >

<main class="flex flex-wrap justify-center w-full h-full font-mono">
      <section class="flex justify-center flex-col items-center w-full m-6 p-4 bg-indigo-400 rounded-md">
        <h1 class="text-white text-2xl font-extrabold tracking-wider text-center">Colors and Dimensions</h1>
        <button class="xsm:w-full sm:w-1/2 md:w-80 lg:w-40 xl:w-30 bg-blue-900 text-blue-50 px-1 py-2 font-extrabold tracking-tight rounded-md my-6">
          Click Me!
        </button>
      </section>
      <section class="flex justify-center flex-col items-center w-full m-6 p-4 bg-indigo-400 rounded-md">
        <h1 class="text-white text-2xl font-extrabold tracking-wider text-center">Display & Flexbox</h1>
        <div class="flex justify-center my-4">
          <button class="w-40 bg-orange-300 text-orange-900 text-lg font-bold rounded-md py-1">Button 1</button>
          <button class="w-40 bg-orange-300 text-orange-900 text-lg font-bold rounded-md ml-4 py-1">Button 2</button>
          <button class="w-40 bg-orange-300 text-orange-900 text-lg font-bold rounded-md ml-4 py-1">Button 3</button>
        </div>
      </section>
      <section class="flex justify-center flex-col items-center w-full m-6 p-4 bg-indigo-400 rounded-md">
        <h1 class="text-white text-2xl font-extrabold tracking-wider text-center">Pseudo-Class Variants</h1>
        <div class="flex justify-center my-4">
          <button class="w-40 bg-orange-300 text-orange-900 text-lg font-bold rounded-md py-1 hover:bg-orange-500 active:bg-orange-300 active:ring active:ring-orange-900">Button 1</button>
          <button class="w-40 bg-orange-300 text-orange-900 text-lg font-bold rounded-md ml-4 py-1 hover:bg-orange-500 active:bg-orange-300 active:ring active:ring-orange-900">Button 2</button>
          <button class="w-40 bg-orange-300 text-orange-900 text-lg font-bold rounded-md ml-4 py-1 hover:bg-orange-500 active:bg-orange-300 active:ring active:ring-orange-900">Button 3</button>
        </div>
      </section>
      <section class="flex justify-center flex-col items-center w-full m-6 p-4 bg-indigo-400 rounded-md">
        <h1 class="text-white text-2xl font-extrabold tracking-wider text-center">Extract Components Using @apply</h1>
        <div class="flex flex-row flex-wrap justify-center mt-6">
          <div class="alert">This is a message.</div>
          <div class="alert alert-warning">This is a warning message.</div>
          <div class="alert alert-danger">This is a danger message.</div>
          <div class="alert alert-info">This is an info message.</div>
        </div>
      </section>
    </main>

css >

@layer components {
  .alert {
    @apply w-80 m-2 px-4 py-1 bg-gray-200 text-sm text-gray-700 rounded-md border border-gray-600;
  }

  .alert-danger {
    @apply bg-yellow-200 text-sm text-yellow-700 rounded-md border border-yellow-600;
  }

  .alert-warning {
    @apply bg-red-200 text-sm text-red-700 rounded-md border border-red-600;
  }

  .alert-info {
    @apply bg-sky-200 text-sm text-sky-700 rounded-md border border-sky-600;
  }
} 
```![Screenshot 2023-01-03 at 12-06-56 Home.png](https://static.platzi.com/media/user_upload/Screenshot%202023-01-03%20at%2012-06-56%20Home-43c33eb1-61f2-4329-bf13-88c02dcf84d3.jpg)

YOVANA FLOREZ CHOQUE

EN VUE

<template>
  <h1 class="text-3xl font-bold">PRACTICA DE TAILWIND</h1>
  <p class="mt-4 text-blue-500">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Quisquam, quidem.
  </p>
  <div class="ml-5 mt-4 flex flex-col items-center justify-around h-32 w-64 bg-green-100">
    <button class="btn hover:bg-red-600 active:bg-red-300 bg-red-500 py-1 px-3 rounded-lg">Hover</button>
    <button class="active:bg-red-400 bg-red-500 py-1 px-3 rounded-lg">Active</button>
  </div>
  <div>
    <section class="mx-5 my-8 border-l-4 bg-gray-100 p-3 w-1/2 border-gray-200">
      <h1 class="font-bold ">Alerta</h1>
      <p class="text-xs ">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis ducimus sapiente ad dolorem id odio quas, corporis nemo accusantium vero numquam repellendus a animi suscipit mollitia quisquam minus soluta. Et asperiores dolor minus quis sint. Aut autem sed a iure.</p>
    </section>
    <section class="mx-5 my-8 border-l-4 bg-green-100 p-3 w-1/2 border-green-200">
      <h1 class="font-bold ">Alerta</h1>
      <p class="text-xs ">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis ducimus sapiente ad dolorem id odio quas, corporis nemo accusantium vero numquam repellendus a animi suscipit mollitia quisquam minus soluta. Et asperiores dolor minus quis sint. Aut autem sed a iure.</p>
    </section>
    <section class="mx-5 my-8 border-l-4 bg-red-100 p-3 w-1/2 border-red-200">
      <h1 class="font-bold ">Alerta</h1>
      <p class="text-xs ">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis ducimus sapiente ad dolorem id odio quas, corporis nemo accusantium vero numquam repellendus a animi suscipit mollitia quisquam minus soluta. Et asperiores dolor minus quis sint. Aut autem sed a iure.</p>
    </section>
    <section class="mx-5 my-8 border-l-4 bg-yellow-100 p-3 w-1/2 border-yellow-200">
      <h1 class="font-bold ">Alerta</h1>
      <p class="text-xs ">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis ducimus sapiente ad dolorem id odio quas, corporis nemo accusantium vero numquam repellendus a animi suscipit mollitia quisquam minus soluta. Et asperiores dolor minus quis sint. Aut autem sed a iure.</p>
    </section>
  </div>
</template>

César Palma

Usar @apply no es crear tus propios componentes, sino extraer classes para crear tu propio bootstrap

Maria Fernanda Martinez Labra

Mi reto:

Cesar Velásquez Córdova

Default o xs breakpoint:

127 - default - 2021-31-3 at 10.24.58 PM.jpg

sm breakpoint:

md breakpoint:

Daniel Fernando Aguirre Correa

Por aquí les comparto mi reto, saludos!

Ruben Garcia

RETO

Reynaldo Francisco Moreno Briceño

Reto cumplido!

Vista desde Mobile:

Vista desde Desktop:

LeoCode0

Primer reto

    <div class="m-10">
        <button class="bg-blue-600 text-white h-10 borde sm:w-full rounded-lg md:w-1/3 lg:w-1/6">
            Boton
        </button>
    </div>

Segundo reto

    <div class="m-4 flex justify-center">
        <button class=" bg-green-500 hover:bg-green-900 hover:text-white px-4 py-1">Boton 1</button>
        <button class=" bg-teal-500 hover:bg-teal-900 hover:text-white px-4 py-1">Boton 2 </button>
        <button class=" bg-red-500 hover:bg-red-900 hover:text-white px-4 py-1">Boton 3</button>
    </div>

Tercer reto

.alert{
    @apply bg-red-500;
    @apply text-black;
    @apply m-4;
    @apply p-4;
    @apply rounded-l;
    @apply w-64;
}

.alert-danger{
    @apply bg-red-700 ;
    @apply text-white;
}

.alert-warning{
    @apply bg-yellow-500;
}

.alert-info{
    @apply bg-blue-700;
    @apply  text-white;
}

Lucas Alejandro Moreno Olivos

Reto cumplido.
1.- Colores y dimensiones

 <button class="hover:bg-blue-800 hover:text-blue-100 my-2 mx-2 font-bold bg-blue-300 w-full md:w-1/3 text-blue-800 text-lg">Boton 1</button>

2.- Flexbox

<div class="my-16 flex flex-col md:flex-row">
            <button class="hover:bg-blue-800 hover:text-blue-100 my-2 mx-2 font-bold bg-blue-300 w-full md:w-1/3 text-blue-800 text-lg">Boton 1</button>
            <button class="hover:bg-red-800 hover:text-red-100 my-2 mx-2 font-bold bg-red-300 w-full md:w-1/3 text-red-800 text-lg">Boton 2</button>
            <button class="hover:bg-green-800 hover:text-green-100 my-2 mx-2 font-bold bg-green-300 w-full md:w-1/3 text-green-800 text-lg">Boton 3</button>
        </div>

3.-PSeudo Class Variants

hover:bg-blue-800 hover:text-blue-10

4.- Apply

@tailwind base;

@tailwind components;

.alert{
    @apply bg-green-700 px-8 py-2 m-4 text-green-100 inline-block;
}
.alert-danger{
    @apply bg-red-700 px-8 py-2 m-4 text-red-100 inline-block;
}
.alert-warning{
    @apply bg-yellow-700 px-8 py-2 m-4 text-yellow-100 inline-block;
}
.alert-info{
    @apply bg-blue-700 px-8 py-2 m-4 text-blue-100 inline-block;
}
@tailwind utilities;

Wandy Rafael Santana Evangelista

My final code:

<div class="container mx-auto mt-16">
        <h3 class="font-bold text-center">Buttons.</h3>
        <div class="flex justify-center">
            <button class="sm:w-full md:w-1/6 mx-2 hover:bg-blue-900 hover:text-blue-100 bg-blue-400 text-blue-900">Btn-1</button>
            <button class="sm:w-full md:w-1/6 mx-2 hover:bg-green-900 hover:text-green-100 bg-green-400 text-green-900">Btn-2</button>
            <button class="sm:w-full md:w-1/6 mx-2 hover:bg-yellow-900 hover:text-yellow-100 bg-yellow-400 text-yellow-900">Btn-3</button>
        </div>
    </div>
    <div class="container mx-auto mt-16">
        <h3 class="text-center font-bold">Alerts</h3>
        <div class="flex justify-center">
            <div class="alert hover:bg-gray-600 hover:text-black">Alert Default</div>
            <div class="alert alert-danger hover:bg-red-900 hover:text-white">Alert Danger</div>
            <div class="alert alert-warning hover:bg-yellow-900 hover:text-white">Alert Warning</div>
            <div class="alert alert-info hover:bg-blue-900 hover:text-white">Alert Info</div>
        </div>
    </div>```

Angélica Rocha

Reto solucionado

<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“UTF-8”>
<title>Practica Tailwind</title>
<link rel=“stylesheet” href=“css/style.css”>
</head>
<body>
<section id=“ejercicio1”>
<div class=“flex font-semibold”>
<h2 class=“mx-auto mt-8”>Ejercicio 1 Colores y dimensiones</h2>
</div>
<div class=“flex flex-wrap h-64 items-start”>
<button class=“w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 h-32 m-16 mx-auto bg-blue-500 text-blue-900”>
Enviar
</button>
</div>
</section>
<section id=“ejercicio2”>
<div class=“flex”>
<h2 class=“mx-auto font-semibold”>Ejercicio 2 y 3 Display y flexbox Pseudo class</h2>
</div>
<div class=“flex justify-center”>
<button class=“bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 mt-8 rounded-l”>
Prev
</button>
<button class=“bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 mt-8 rounded-r”>
Next
</button>
<button class=“bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 mt-8 rounded-r”>
Cancel
</button>
</div>
</section>
<section>
<div class=“flex justify-center pt-4”>
<h2 class=“font-semibold”>Ejercicio 4 Componentes @Apply</h2>
</div>
<div class="">
<div class=“alert”>
Este mensaje es una alerta default.
</div>
<div class=“alert-danger”>
Este mensaje es una alerta danger.
</div>
<div class=“alert-warning”>
Este mensaje es una alerta warning.
</div>
<div class=“alert-info”>
Este mensaje es una alerta info.
</div>
</div>
</section>
</body>
</html>

@tailwind base;

@tailwind components;

.alert{
@apply bg-red-500;
@apply text-black;
@apply m-4;
@apply p-4;
@apply rounded-l;
@apply w-64;
}

.alert-danger{
@apply bg-red-700 ;
@apply text-red-200;
}

.alert-warning{
@apply bg-yellow-500;
}

.alert-info{
@apply bg-blue-700;
@apply text-white;
}

@tailwind utilities;

Yesika Paola Prada Ramírez

Tailwind me ha gustado, es flexible y elegante! Acá está mi práctica.

<h1 class="font-mono text-xl text-gray-800 text-center uppercase">Práctica</h1>
    <div class="mb-4 p-2">
        <h1 class="font-bold font-mono tracking-tight">Colores y dimensiones</h1><br/>
        <button class="bg-blue-800 text-blue-100 rounded p-2 sm:w-full md:w-1/6">Se adapta</button>
    </div>
    <div class="mb-4 p-2">
        <h1 class="font-bold font-mono tracking-tight">Gruop button con Flex y Pseudo class</h1><br/>
        <div class="flex flex-wrap bg-indigo-200 p-1 mt-1">
            <button class="p-1 rounded-l bg-teal-900 w-2/12 text-teal-100">Default</button>
            <button class="hover:bg-teal-400 p-1 bg-teal-500 w-2/12 text-teal-100">Hover</button>
            <button class="active:bg-teal-800 p-1 rounded-r bg-teal-700 w-2/12 text-teal-100">Active</button>
            
        </div>
    </div>
    <div class="mb-4 p-2">
        <h1 class="font-bold font-mono tracking-tight">Directiva @apply </h1><br/>
        <div class="flex flex-col p-2 mt-1">
            <div class="alert alert-default">Este mensaje es una alerta default.</div>
            <div class="alert alert-danger">Este mensaje es una alerta danger.</div>
            <div class="alert alert-warning">Este mensaje es una alerta warning.</div>
            <div class="alert alert-info">Este mensaje es una alerta info.</div>
        </div>
    </div>

Diego Fernando Rojas Quintero

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/Development/style.css">
  <title>Reto</title>
</head>
<body class="m-0 h-screen w-screen flex justify-center items-center flex-col ">

  <button class="bg-teal-500 hover:bg-teal-700 text-teal-700
  hover:text-teal-900 font-bold py-2 px-4 border border-blue-700  m-2">
    Button
  </button>
  
  <hr></hr>
  
  <button class="bg-teal-500 hover:bg-teal-700 text-teal-700
  hover:text-teal-900 font-bold py-2 px-4 border border-blue-700 rounded m-2 w-screen md:w-1/2 ld:w-1/6 xl:w-24">
    Button
  </button>

  <hr></hr>

  <div class="inline-flex">
    <button class="bg-indigo-500 hover:bg-indigo-700 hover:text-gray-400 text-gray-800 font-bold py-2 px-4 mx-4 rounded-l">
      Prev:
      <small>hover</small>
    </button>
    <button class="bg-purple-500 active:bg-purple-700 active:text-purple-400 text-gray-800 font-bold py-2 px-4 mx-4">
      center:
      <small>active</small>
    </button>
    <button class="bg-pink-500 hover:bg-pink-700 hover:text-gray-400 text-gray-800 font-bold py-2 px-4 mx-4 rounded-r">
      Next:
      <small>hover</small>
    </button>
  </div>

  <div class="flex flex-col">
    <div class="alert alert-default">
      Este mensaje es una alerta default.
    </div>
    
    
    <div class="alert alert-danger">
      Este mensaje es una alerta danger.
    </div>
    
    
    <div class="alert alert-warning">
      Este mensaje es una alerta warning.
    </div>
    
    <div class="alert alert-info">
      Este mensaje es una alerta info.
    </div>

    <div class="alert alert-success">
      Este mensaje es una alerta success.
    </div>
    
  </div>
</body>
</html>

tailwind.css

@tailwind base;

@tailwind components;

.alert{
  @apply w-auto;
  @apply h-auto;
  @apply m-4;
  @apply p-2;
  @apply text-center;
}

.alert-default{
  @apply border-t-4;
  @apply border-gray-500;
  @apply bg-gray-300;
  @apply text-gray-800;
}

.alert-danger{
  @apply border-t-4;
  @apply border-red-500;
  @apply bg-red-300;
  @apply text-red-800;
}

.alert-warning{
  @apply border-t-4;
  @apply border-yellow-500;
  @apply bg-yellow-300;
  @apply text-yellow-800;
}
.alert-info{
  @apply border-t-4;
  @apply border-blue-500;
  @apply bg-blue-300;
  @apply text-blue-800;
}
.alert-success{
  @apply border-t-4;
  @apply border-teal-500;
  @apply bg-teal-300;
  @apply text-teal-800;
}

@tailwind utilities;

tailwind.config.js

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'active'],
    textColor: ['responsive', 'hover', 'focus', 'active'],
  },
  plugins: [],
}

JorxD

reto cumplido.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body class=" bg-blue-300">
    <!-- Primer reto -->
    <div class="my-10">
        <button class="bg-blue-900 px-6 text-white borde h-12 rounded-lg sm:w-full md:w-1/2">
            Boton
        </button>
    </div>
    <!-- Segundo reto -->
    <div class="m-4 flex justify-center">
        <button class=" bg-orange-500 border-solid border-red-700 mx-4 rounded-lg hover:bg-orange-700 hover:text-white px-6 py-3">Boton 1</button>
        <button class=" bg-green-500 mx-4 rounded-lg hover:bg-green-700 hover:text-white px-6 py-3">Boton 2 </button>
        <button class=" bg-blue-500 mx-4 rounded-lg hover:bg-blue-700 hover:text-white px-6 py-3">Boton 3</button>
    </div>
    <!-- Tercer reto -->
<div class="flex flex-col">
    <div class="alert alert-default">
        Este mensaje es una alerta default.
    </div>
    <div class='alert alert-danger'>
        Este mensaje es una alerta danger.
    </div>
    <div class='alert alert-warning'>
	    Este mensaje es una alerta warning.
    </div>
    <div class='alert alert-info'>
	    Este mensaje es una alerta info.
    </div>
</div>
</body>
</html>

En el tailwindconfig.js se puso el siguiente codigo para las alertas:
variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'active'],
    textoColor: ['responsive', 'hover', 'focus', 'active'],
},

Gonzalo Pimentel

Me tomo un tiempo pero lo logré! Así quedó:

Reto1:

Reto2:

Reto2:

Diego Alfonso Najera Ortiz

Reto 1:

<button class="px-4 py-2 bg-blue-400 text-blue-900 text-white w-full md:w-auto font-bold">
	Boton
</button>

Reto 2:

<div class="h-16 bg-gray-500 w-auto inline-block rounded-lg">
	<button class="h-full px-4 rounded-lg rounded-r-none hover:bg-gray-800">Button 1</button>
	<button class="h-full px-4 hover:bg-gray-800">Button 2</button>
	<button class="h-full px-4 rounded-lg rounded-l-none hover:bg-gray-800">Button 3</button>
</div>

Reto 3:

.alert {
	@apply w-full mt-2 mb-2 px-4 py-4;
	@apply border-2 rounded-lg;
	@apply border-gray-800 bg-gray-400 text-gray-800;
}

.alert-danger {
	@apply border-red-800 bg-red-300 text-red-900;
}

.alert-warning {
	@apply border-orange-800 bg-orange-300 text-orange-900;
}

.alert-info {
	@apply border-blue-800 bg-blue-300 text-blue-900;
}

Diego Alvaro Parra Abad

Retos completados.

Ivan Gonzalez Gonzalez

Aarón Fabricio Santa Cruz Valdez

<div class="container bg-blue-700">
        <div class="w-full p-8 text-center">
          <h1 class="uppercase mb-8 text-4xl">primer reto</h1>
          <button class="w-full md:w-auto bg-green-300 px-4  py-1 ">button</button>
        </div>
      </div>
      <div class="w-full flex justify-center h-auto py-16">
        <button class="bg-green-400 px-4  py-1 hover:bg-green-800 hover:text-white mx-3 rounded-lg ">boton 1</button>
        <button class="bg-green-400 px-4  py-1 hover:bg-green-800 hover:text-white mx-3 rounded-lg ">boton 2</button>
        <button  class="bg-green-400 px-4  py-1 hover:bg-green-800 hover:text-white mx-3 rounded-lg ">boton 3</button>
      </div>
      <div class="w-full lg:flex sm:block">
        <button class="alert lg:w-auto h-auto">NEUTRAL</button>
        <button class="alert-danger md:bg-green-400 lg:w-auto h-auto">ALERT DANGER</button>
        <button class="alert-info lg:w-auto h-auto">ALERT INFO</button>


      </div>

Marco Jaramillo Castro

Daniel Valderrama Mendoza

creo que perdi bastante tiempo en descubrir aue despues de poner @apply tienes que correr en la consola npm run build 😅

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body class="mx-4">

  <h1 class="font-sans text-center text-4xl tracking-wider ">RETOS 🧑‍💻</h1>
  <h1 class="font-sans text-center text-4xl tracking-wider mt-20">RETO #1 🌚</h1>
  <div class="flex text-center justify-center mt-8">
    <button class="mt-4 bg-blue-500 rounded-md h-10 w-full  text-white mr-auto ml-auto md:w-40">META</button>
  </div>
  <h1 class="font-sans text-center text-4xl tracking-wider mt-20">RETO #2 🌝</h1>
  <div class="flex text-center md:justify-center flex-wrap mt-8">
    <button class="mt-4 bg-blue-400 hover:bg-blue-600 rounded-md h-10 w-full  text-white mr-auto ml-auto md:w-40">META</button>
    <button class="mt-4 bg-red-400 hover:bg-red-600 rounded-md h-10 w-full  text-white mr-auto ml-auto md:w-40">META 2</button>
    <button class="mt-4 bg-green-400 hover:bg-green-600 rounded-md h-10 w-full  text-white mr-auto ml-auto md:w-40">META 3</button>
  </div>
  <h1 class="font-sans text-center text-4xl tracking-wider mt-20">RETO #3 😌</h1>
  <div class="alert alert-default">
  Something seriously bad happened.
  </div>
  <div class="alert alert-error">
  Something seriously bad happened.
  </div>
  <div class="alert alert-warning">
  Something seriously strange happened.
  </div>
  <div class="alert alert-success">
  Something seriously good happened.
  </div>
  <div class="alert alert-info">
  Something seriously happened.
  </div>
</body>

</html>

.alert {
  @apply w-auto h-auto my-4 py-4 px-8 rounded relative border-solid border-4;
}

.alert-default {
  @apply bg-gray-200 border-gray-400 text-gray-700;
}
.alert-error {
  @apply bg-red-200 border-red-400 text-red-700;
}
.alert-warning {
  @apply bg-yellow-200 border-yellow-400 text-yellow-700;
}
.alert-success {
  @apply bg-green-200 border-green-400 text-green-700;
}
.alert-info {
  @apply bg-blue-200 border-blue-400 text-blue-700;
}```

Cristian Caraballo

Use @apply to inline any existing utility classes into your own custom CSS.

This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.

.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 text-white;
}
.btn-blue:hover {
  @apply bg-blue-700;
}

Jomooto

Hice una combinacion de los tres ejercicios
Site

leonmg

Screen Shot 2021-03-03 at 11.36.57 AM.png

Miguel Ángel Reyes Moreno

Esto fue lo que yo hice:

<!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>Colores</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>
        button{
            color: #100B2D;
        }
    </style>
</head>
<body>
    <button class="bg-blue-500 w-full md:w-48">Hola soy un botón</button>
</body>
</html>

<!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>Flex</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="flex flex-row bg-gray-600 justify-between w-1/3">
        <div class="bg-blue-400 hover:text-white">Soy el div 1</div>
        <div class="bg-red-400 hover:text-white">Soy el div 2</div>
        <div class="bg-yellow-400 hover:text-white">Soy el div 3</div>
    </div>
</body>
</html>

<!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>Alert</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="alert text-white default">Default</div>
    <div class="alert text-white danger">Danger</div>
    <div class="alert warning">Warning</div>
    <div class="alert text-white info">Info</div>
</body>
</html>

.alert{
    margin: 20px;
    font-size: 1.3rem;
    border: 2px solid black;
    border-radius: 10px;
    width: fit-content;
    padding: 10px;
}

.default{
    background-color: green;
}

.danger{
    background-color: red;
}

.warning{
    background-color: yellow;
}

.info{
    background-color: blue;
}

Juan Otavalo

@apply se utiliza cuando un componente puede “heredar” de otro. Aqui dejo la documentación de Apply para que es super detallada y ayuda a entender mejor este concepto.

Edgar Ramón González Contreras

Gracias a la ayuda de mis compañeros pude crear algo similar pero que pude comprender:

Codigo HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/style.css" />
    <title>Reto</title>
  </head>
  <body>
    <main>
      <h1 class="text-center text-3xl my-10">Retos del Curso</h1>
      <section>
        <button
          class="ml-20 btn bg-blue-600 w-full sm:w-1/2 md:w-2/5 lg:w-1/6 xl:w-7/12 rounded"
        >
          Submit
        </button>
      </section>

      <section class="my-10">
        <h2 class="text-center text-3xl mb-10">Display Flex buttons</h2>
        <div class="flex">
          <button class="btn btn-blue ml-10">Boton 1</button>
          <button class="btn btn-red ml-10">Boton 2</button>
          <button class="btn btn-yellow active:bg-red-500 ml-10">
            Boton 3
          </button>
        </div>
      </section>
      <section>
        <h2 class="text-center text-3xl">Alerts</h2>
        <div class="w-100 ml-5">
          <div class="alert alert-neutro">Esta es una alerta por default</div>
          <div class="alert alert-danger">Este mensaje es un alerta danger</div>
          <div class="alert alert-warning">
            Este mensaje es un alerta warning
          </div>
          <div class="alert alert-info">Este mensaje es un alerta info</div>
        </div>
      </section>
    </main>
  </body>
</html>

Y el CSS style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.zoom {
  transform: scale(2);
}

/* Variantes */
@variants hover {
  .zoom {
    transform: scale(2);
    transition: 2s;
  }
}

/* Responsive */
@responsive {
  .rotate-45 {
    transform: rotate(45deg);
    transition: 2s;
  }
}

/* Reto */
.btn {
  @apply font-bold py-2 px-4 rounded text-lg w-full sm:w-48;
}

.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white;
}
.btn-red {
  @apply bg-red-500 hover:bg-red-700 text-white;
}
.btn-yellow {
  @apply bg-yellow-500 hover:bg-yellow-700 text-white;
}

.alert {
  @apply py-2 px-4 text-lg text-center rounded border-solid w-full sm:w-80 mb-3;
}

.alert-neutro {
  @apply py-2 px-4 rounded bg-gray-100 text-gray-500 border-gray-300;
}

.alert-danger {
  @apply py-2 px-4 rounded bg-red-100 text-red-500 border-red-300;
}

.alert-warning {
  @apply py-2 px-4 rounded bg-yellow-100 text-yellow-500 border-yellow-300;
}

.alert-info {
  @apply py-2 px-4 rounded bg-blue-100 text-blue-500 border-blue-300;
}

Javier Sánchez Mendoza