¡Reencuéntrate con la tecnología en Platzi Day! Accede a miles de cursos por 72 horas. Una sorpresa te espera 😎

Regístrate

Termina en:

02D

20H

29M

56S

60

Crea la aplicación de una casa inteligente con TailwindCSS (parte 1)

13696Puntos

hace 2 meses

Curso Básico de Tailwind 2 y 3
Curso Básico de Tailwind 2 y 3

Curso Básico de Tailwind 2 y 3

Crea tu primer landing page utilizando Tailwind, un framework CSS que te permitirá agilizar el desarrollo de tus proyectos además de aplicar las mejores prácticas y herramientas que llegaron con Tailwind 2.0. Aprende con tu profesora Ana María Díaz (@coding_byanna).

¡Te doy la bienvenida a un nuevo reto de CSS! Esta vez desarrollaremos la aplicación de una casa inteligente con TailwindCSS.

Compártenos el resultado final en los comentarios y/o en Twitter con el hashtag #RetosPlatziCSS. 😉

Platzi Tailwind CSS

Antes de comenzar, los cursos de Platzi que te recomiendo para realizar este reto son los siguientes:

Paso 0: planeación

Para este reto te propongo que realices los siguientes 8 pasos:

  1. Revisión del diseño e identificación de elementos
  2. Creación del proyecto e instalación de Tailwind
  3. Maquetación del layout principal
  4. Maquetación del modal: Estructura principal
  5. Maquetación del modal: Título y subtítulo
  6. Maquetación del modal: Plano y contenedor de cards
  7. Maquetación del modal: Cards
  8. ¡Compártenos tu resultado en los comentarios!

💡 Recomendación: Evita copiar y pegar el código. Trata de transcribir cada detalle y entender muy bien su funcionamiento (Sin afán, tómate tu tiempo). Solo de esta forma podrás convertirte en un(a) experto(a) en maquetación con CSS.

ʕ•́ᴥ•̀ʔっ ¡Empecemos!

Paso 1: Revisión del diseño e identificación de elementos

Lo primero que debemos hacer (antes de comenzar a escribir código) es tener una comprensión general del diseño y de los elementos. Para lograrlo puedes dividir el diseño en mini estructuras y darles un nombre para que te sirva de guía más adelante.

En nuestro caso, la división del diseño en mini estructuras a nivel general quedaría de la siguiente forma:

Casa inteligente CSS

💡 Esta división no tiene que ser algo muy elaborado, simplemente es una guía para identificar visualmente los elementos y saber por donde arrancar.

Normalmente comenzamos con la maquetación de los elementos más grandes (como layouts y contenedores) y luego se abordan los elementos más pequeños (como botones, íconos, textos, etc). Además de facilitar muchísimo la maquetación de sitios web, esto también permite que nuestro código sea escalable a futuro.

Lo que te propongo, teniendo en cuenta lo anterior, es comenzar creando la maquetación de afuera hacia adentro, es decir, primero el layout (el componente principal que va a contener el modal), luego el contenedor del modal y luego los elementos dentro del modal. Así organizaremos bien nuestras estructuras de HTML y también se nos facilitará muchísimo trabajar con la versión del diseño en mobile.

Paso 2: Creación del proyecto e instalación de TailwindCSS

La maquetación de nuestra aplicación inteligente la haremos con TailwindCSS, un framework de CSS que nos brinda una gran cantidad de clases de CSS para poder hacer nuestros sitios web de una forma mucho más rápida. Esto quiere decir que no tendemos que escribir código CSS (solo en algunos casos), sino únicamente añadir las clases de CSS que Tailwind ya tiene disponibles a nuestro HTML y listo.

Para comenzar a trabajar con TailwindCSS debemos seguir algunos pasos para su instalación. Para ello, te recomiendo tomar la clase sobre Creación del proyecto e instalación de Tailwind del Curso Básico de Tailwind donde nuestra profe Ana nos enseña paso a paso cómo realizar esta configuración. También pueds seguir los pasos de instalación de la documentación oficial de TailwindCSS.

💡 Si solamente quieres explorar TailwindCSS y saber cómo funciona, te recomiendo utilizar Tailwind Play, una herramienta que te permite usar TailwindCSS de forma online.

Una vez tengas toda la configuración lista, podemos comenzar con la maquetación de nuestra aplicación.

Paso 3: Maquetación del layout principal

Antes de comenzar con la maquetación del layout principal, revisemos cómo sería el resultado final que queremos conseguir tanto en desktop como en mobile:

Layout CSS Platzi

Para construir este layout hagamos una lista de lo que necesitamos hacer junto con las propiedades y valores que nos permitirían lograr eso que necesitamos:

Lo que necesitamosPropiedad(es) y valor(es) para lograrlo
Centrar vertical y horizontalmente el modal en un futurodisplay: grid y place-items: center
Tener una imagen de fondobackground-image: url('../image.png')
Centrar la imagen de fondobackground-position: center
Hacer que la imagen ocupe todo el tamaño disponible sin dañar sus proporcionesbackground-size: cover
Añadir un espacio entre él y el modal del futuro en mobilepadding: 2rem
Quitar el espacio entre el layout y el modal en desktoppadding: 0 dentro de un media query como @media (min-width: 1024px)
Evitar que al añadir el espacio entre él y el modal no aumente las dimensiones del layout y nos genere scoll horizontal y verticalbox-sizing: border-box
Darle un ancho del 100%width: 100%
Darle un alto mínimo que tenga el mismo alto de la pantalla del usuariomin-height: 100vh

Una vez conocemos cuáles son las propiedades que nos ayudarán a conseguir el resultado que necesitamos en nuestro layout principal, debemos hacer una analogía entre esas propiedades y valores vs. las clases de CSS que TailwindCSS nos provee.

Por ejemplo, si quiero usar padding: 2rem, lo ideal es que no escribamos esto en CSS (es decir, que no tengamos un archivo de estilos en donde tengamos que poner div { padding: 2rem }) sino que busquemos en la documentación de TailwindCSS, cuál sería la clase equivalente a padding: 2rem para poder añadirla en nuestro HMTL.

Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:

Propiedades y valores en CSSClase en TailwindCSS
display: gridgrid
place-items: centerplace-items-center
background-position: centerbg-center
background-size: coverbg-cover
box-sizing: border-boxbox-border
min-height: 100vhmin-h-screen
width: 100%w-full
padding: 2remp-8
@media (min-width: 1024px) { padding: 0 }lg:p-0

Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:

class="grid place-items-center bg-plant bg-center bg-cover box-border min-h-screen w-full p-8 lg:p-0">div>

Para este caso, lo único que nos hace falta es la imagen de fondo de la clase bg-plant. Para ello, debemos modificar la configuración de TailwindCSS (ya que es una imagen que no provee TailwindCSS por defecto) para añadir una clase propia (custom), así:

module.exports = {
  content: ['./public/index.html', './src/**/*.{html,js}'],
  theme: {
      extend: {
        backgroundImage: {
          'plant': "url('https://images.pexels.com/photos/916339/pexels-photo-916339.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')",
        }
      }
  },
  plugins: [],
}

La imagen de la planta la tomé de Pexels.

Y para decirle a nuestro body que no tenga margin y que tenga la fuente Popins podemos añadir CSS así:

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500&display=swap');

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
}

También podemos agregar la clase m-0 en la etiqueta body y añadir la fuente a la configuración de TailwindCSS. 😉

Paso 4: Maquetación del modal: Estructura principal

Revisemos cómo sería el resultado final que queremos conseguir tanto en desktop como en mobile:

3

Hagamos nuevamente una lista de lo que necesitamos hacer junto con las propiedades y valores que nos permitirían lograr eso que necesitamos:

Lo que necesitamosPropiedad(es) y valor(es) para lograrlo
Ubicar los elementos futuros (textos y contenedor del plano y cards) de forma verticaldisplay: flex y flex-direction: column
Añadir un espacio entre el modal y el contenedor de los elementos del futuropadding: 2rem
Quitar el espacio entre el modal y el contenedor en mobile ya que el espacio es más pequeñopadding: 0 dentro de un media query como @media (min-width: 1024px)
Evitar que al añadir el espacio entre el modal y el contenedor no aumente las dimensiones del layout y nos genere scoll horizontal y verticalbox-sizing: border-box
Darle un ancho máximo de 1024pxmax-width: 1024px
Darle un ancho del 100% del tamaño del contenedor en desktopwidth: 100%
Darle un ancho de un poco más de la mitad del tamaño del contenedor en mobilewidth: 66.666667%

Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:

Propiedades y valores en CSSClase en TailwindCSS
display: flexflex
flex-direction: columnflex-col
padding: 2remp-8
@media (min-width: 1024px) { padding: 4rem }lg:p-16
box-sizing: border-boxbox-border
max-width: 1024pxmax-w-screen-lg
width: 100%w-full
width: 66.666667%w-8/12

Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:

class="glassmorphism flex flex-col p-8 lg:p-16 box-border max-w-screen-lg w-full lg:w-8/12">div>

Nuestro anterior HTML junto con el HTML del layout principal, se vería de la siguiente manera:

<divclass="grid place-items-center bg-plant bg-center bg-cover box-border min-h-screen w-full p-8 lg:p-0"><divclass="glassmorphism flex flex-col p-8 lg:p-16 box-border max-w-screen-lg w-full lg:w-8/12">div>div>

Como puedes notar, hay una clase de CSS llamada glassmorphism que no corresponde a TailwindCSS, sino que la creamos nosotros para añadir el efecto de vidrio al modal.

Este efecto de vidrio lo podemos conseguir con el generador de efecto glassmorphism en donde puedes cambiar el valor del blur y la transparencia hasta lograr el efecto que más te guste.

En mi caso, usé los valores por defecto del generador, así:

.glassmorphism {
  background: rgba( 255, 255, 255, 0.25 );
  box-shadow: 08px32px0rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
}

En este tutorial puedes aprender un poco más sobre el efecto Glassmorphism con CSS: # Crea tu planeador semanal con CSS Grid, Flexbox y Glassmorphism 💪

Paso 5: Maquetación del modal: Título y subtítulo

Revisemos el resultado final:

4

Hagamos una lista de lo que necesitamos hacer junto con las propiedades y valores que nos permitirían construir el primer texto:

Lo que necesitamosPropiedad(es) y valor(es) para lograrlo
Un tamaño de fuente de 1rem en mobilefont-size: 1rem
Un tamaño de fuente de 1.25rem en dekstopfont-size: 1.25rem dentro de un media query como @media (min-width: 1024px) { ... }
Quitarle la márgen superior que tienen los párrafos por defectomargin-top: 0px
Darle un espacio entre él y el texto de abajomargin-bottom: 0.5rem
Centrar el textotext-align: center

Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:

Propiedades y valores en CSSClase en TailwindCSS
font-size: 1rem; line-height: 1.5remtext-base
@media (min-width: 1024px) { … }lg:
font-size: 1.25rem; line-height: 1.75rem;text-xl
margin-top: 0pxmt-0
margin-bottom: 0.5remmb-2
text-align: centertext-center

Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:

<pclass="text-base lg:text-xl mt-0 mb-2 text-center">You are controllingp>

Para construir el segundo texto, hagamos otra lista de lo que necesitamos hacer junto con las propiedades y valores que nos permitirían lograr eso que necesitamos:

Lo que necesitamosPropiedad(es) y valor(es) para lograrlo
Un tamaño de fuente de 1.5rem en mobilefont-size: 1.5rem
Un tamaño de fuente de 2.25rem en desktopfont-size: 2.25rem dentro de un media query como @media (min-width: 1024px) { ... }
Quitarle la márgen superior que tienen los títulos por defectomargin-top: 0px
Centrar el textotext-align: center
Darle un grosor al textofont-weight: 700

Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:

Propiedades y valores en CSSClase en TailwindCSS
font-size: 1.5rem; line-height: 2remtext-2xl
@media (min-width: 1024px) { … }lg:
font-size: 2.25rem; line-height: 2.5remtext-4xl
margin-top: 0pxmt-0
text-align: centertext-center
font-weight: 700font-bold

Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:

<h1class="text-2xl lg:text-4xl m-0 text-center font-bold">Main Lounge & Dining Roomh1>

Nuestro anterior HTML junto con el HTML de los pasos anteriores se vería de la siguiente forma:

<divclass="grid place-items-center bg-plant bg-center bg-cover box-border min-h-screen w-full p-8 lg:p-0"><divclass="glassmorphism flex flex-col p-8 lg:p-16 box-border max-w-screen-lg w-full lg:w-8/12"><pclass="text-base lg:text-xl mt-0 mb-2 text-center">You are controllingp><h1class="text-2xl lg:text-4xl m-0 text-center font-bold">Main Lounge & Dining Roomh1>div>div>

Paso 6: Maquetación del modal: Plano y contenedor de cards

Antes de comenzar con la maquetación del plano y el contenedor de las cards, revisemos cómo sería el resultado final que queremos conseguir tanto en desktop como en mobile:

5

Para construir el contenedor del plano y el contenedor de las cards, hagamos una lista de lo que necesitamos hacer junto con las propiedades y… sí, ya lo sabes 😅… véamos cómo queda:

Lo que necesitamosPropiedad(es) y valor(es) para lograrlo
Ubicar los elementos futuros (plano y contenedor de las cards) de forma horizontal en desktopdisplay: flex y flex-direction: row dentro de un media query como @media (min-width: 1024px) { ... }
Ubicar los elementos futuros (plano y contenedor de las cards) de forma vertical en mobiledisplay: flex y flex-direction: column
Espacio entre los hijosgap: 1.25rem
Centrado de los hijos vertical y horizontalmentejustify-content: center y align-items: center
Darle un ancho del 100% del tamaño del contenedorwidth: 100%
Darle un espacio superior de 2rem en mobilemargin-top: 2rem
Darle un espacio superior de 4rem en desktopmargin-top: 4rem dentro de un media query como @media (min-width: 1024px) { ... }
Darle un espacio inferior de 0px en mobilemargin-bottom: 0
Darle un espacio inferior de 4rem en desktopmargin-bottom: 4rem dentro de un media query como @media (min-width: 1024px) { ... }

Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:

Propiedades y valores en CSSClase en TailwindCSS
display: flexflex
flex-direction: columnflex-col
@media (min-width: 1024px) { … }lg:
flex-direction: rowflex-row
gap: 1.25remgap-5
justify-content: centerjustify-center
align-items: centeritems-center
width: 100%w-full
margin-top: 2remmt-8
margin-top: 4remmt-16
margin-bottom: 0pxmb-0
margin-top: 4rem; margin-bottom: 4remmy-16

Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:

class="flex flex-col lg:flex-row lg:gap-5 justify-center items-center w-full mt-8 lg:mt-16 mb-0 lg:my-16">div>

Veamos ahora la lista para construir el contenedor del plano:

Lo que necesitamosPropiedad(es) y valor(es) para lograrlo
Centrar vertical y horizontalmente el planodisplay: grid y place-items: center
Darle un ancho del 100% en mobilew-full
Darle un ancho del 66.666667% en desktop para que las cards ocupen el ancho restantew-4/6 dentro de un media query como @media (min-width: 1024px) { ... }

Las propiedades y las clases de TailwindCSS correspondientes:

Propiedades y valores en CSSClase en TailwindCSS
display: gridgrid
place-items: centerplace-items-center
width: 100%w-full
@media (min-width: 1024px) { … }lg:
width: 66.666667%w-4/6

Y las añadimos a la estructura HTML:

class="grid place-items-center w-full lg:w-4/6"><imgclass="w-full'"src="https://i.ibb.co/09fmVRK/plan.png"alt="plan">div>

Vamos ahora con el contenedor de las cards:

Lo que necesitamosPropiedad(es) y valor(es) para lograrlo
Centrar vertical y horizontalmente el planodisplay: grid y place-items: center
Darle un ancho del 100% en mobilew-full
Darle un ancho del 33.333333% en desktop (medida que se obtiene de restar el 100% del total menos el 66.66% del contenedor del plano)w-2/6 dentro de un media query como @media (min-width: 1024px) { ... }
Darle un espacio superior de 2rem en mobilemargin-top: 2rem
Darle un espacio superior de 0px en desktopmargin-top: 0 dentro de un media query como @media (min-width: 1024px) { ... }

Clases de TailwindCSS:

Propiedades y valores en CSSClase en TailwindCSS
display: gridgrid
place-items: centerplace-items-center
width: 100%w-full
@media (min-width: 1024px) { … }lg:
width: 33.333333%w-2/6
margin-top: 2remmt-8
margin-top: 0mt-0

HTML:

class="controls grid place-items-center w-full lg:w-2/6 mt-8 lg:mt-0">div>

¡Muy bien! Ahora el contenedor interno de las cards (sí, otro contenedor, recuerda la revisión e identificación de elementos que hicimos al principio):

Lo que necesitamosPropiedad(es) y valor(es) para lograrlo
Crear 2 columnas del mismo tamaño con espaciado en mobile y desktopdisplay: grid, grid-template-columns: repeat(2, minmax(0, 1fr)) y gap: 1.25rem por fuera y por dentro de un media query como @media (min-width: 1024px) { ... }
Crear 4 columnas del mismo tamaño con espaciado en tabletdisplay: grid, grid-template-columns: repeat(4, minmax(0, 1fr)) y gap: 1.25rem por dentro de un media query como @media (min-width: 768px) { ... }
Crear 2 filas del mismo tamaño con espaciado en mobile y desktopdisplay: grid, grid-template-rows: repeat(2, minmax(0, 1fr)) y gap: 1.25rem por fuera y por dentro de un media query como @media (min-width: 1024px) { ... }
Crear 1 fila con espaciado en tabletdisplay: grid, grid-template-row: repeat(1, minmax(0, 1fr)) y gap: 1.25rem por dentro de un media query como @media (min-width: 768px) { ... }
Darle un ancho máximo de 1024pxmax-width: 1024px
Darle un ancho del 100% en mobilew-full

Clases de TailwindCSS correspondientes:

Propiedades y valores en CSSClase en TailwindCSS
display: gridgrid
gap: 1.25remgap-5
grid-template-columns: repeat(2, minmax(0, 1fr))grid-cols-2
grid-template-columns: repeat(4, minmax(0, 1fr))grid-cols-4
grid-template-rows: repeat(1, minmax(0, 1fr))grid-rows-1
grid-template-rows: repeat(2, minmax(0, 1fr))grid-rows-2
@media (min-width: 1024px) { … }lg:
@media (min-width: 768px) { … }md:
max-width: 1024pxmax-w-screen-lg
width: 100%w-full

Y añadimos las clases al HTML:

class="controls grid gap-5 grid-cols-2 md:grid-cols-4 lg:grid-cols-2 grid-rows-2 md:grid-rows-1 lg:grid-rows-2 max-w-full w-full">div>

La imagen del plano la tomé de Habitat Pod.

Y, para añadirle unos estilos adicionales para el responsive especialmente, escribimos el siguiente CSS:

.controls {
  min-height: 300px;
}

.controlsimg {
  margin: 0.5rem;
}

@media (max-width: 1024px) {
  .controls {
    width: 100%;
    min-height: 100px;
  }
}

@media (max-width: 767px) {
  .controls {
    max-width: 300px;
    min-height: 200px;
  }
}

Todo el HTML de este paso se vería de la siguiente forma:

class="flex flex-col lg:flex-row lg:gap-5 justify-center items-center w-full mt-8 lg:mt-16 mb-0 lg:my-16"><divclass="grid place-items-center w-full lg:w-4/6"><imgclass="w-full'"src="https://i.ibb.co/09fmVRK/plan.png"alt="plan">div><divclass="controls grid place-items-center w-full lg:w-2/6 mt-8 lg:mt-0"><divclass="controls grid gap-5 grid-cols-2 md:grid-cols-4 lg:grid-cols-2 grid-rows-2 md:grid-rows-1 lg:grid-rows-2 max-w-full w-full">div>div>div>

Paso 7: Maquetación del modal: Cards

Antes de comenzar con la maquetación de las cards, revisemos cómo sería el resultado final que queremos conseguir tanto en desktop como en mobile:

1

Para construir el contenedor principal de las cards, hagamos una lista de lo que necesitamos hacer junto con las propiedades y valores que nos permitirían lograr eso que necesitamos:

Lo que necesitamosPropiedad(es) y valor(es) para lograrlo
Posicionamiento relativo para que el input absoluto se adhiera a élposition: relative
Centrar vertical y horizontalmente los elementos internosdisplay: grid y place-items: center
Evitar que se aumenten las dimensiones de la cardbox-sizing: border-box
Darle un ancho del 100%w-full
Darle un alto del 100%h-full
Aplicarle un estilo al mouse para indicar que la card es clickeablecursor: pointer

Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:

Propiedades y valores en CSSClase en TailwindCSS
position: relativerelative
display: gridgrid
place-items: centerplace-items-center
box-sizing: border-boxbox-border
width: 100%w-full
height: 100%w-full
cursor: pointercursor-pointer

Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:

class="glassmorphism relative grid place-items-center py-3 box-border w-full h-full cursor-pointer">div>

Para añadir el texto a la card, hagamos una lista de lo que necesitamos hacer junto con las propiedades y valores que nos permitirían lograr eso que necesitamos:

Lo que necesitamosPropiedad(es) y valor(es) para lograrlo
Remover las márgenes por defectomargin: 0px
Darle un tamaño de 0.875remfont-size: 0.875rem

Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:

Propiedades y valores en CSSClase en TailwindCSS
margin: 0pxm-0
font-size: 0.875rem; line-height: 1.25remtext-sm

Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:

<pclass="m-0 text-sm">Lightsp>

Para añadir el ícono a la card:

Lo que necesitamosPropiedad(es) y valor(es) para lograrlo
Un ancho de 2remwidth: 2rem
Añadirle un espaciado de 0.5remmargin: 0.5rem

Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:

Propiedades y valores en CSSClase en TailwindCSS
width: 2remw-8
margin: 0.5remm-2

Y ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML:

class="w-8 m-2" src="https://img.icons8.com/pastel-glyph/64/000000/light--v1.png"/>

El ícono lo tomé de icons8.

Para añadir el toggle button a la card tenemos una lista enorme de las propiedades que necesitamos. Lo mejor de todo es que en este reto sobre Dark Mode con Animaciones en CSS y JavaScript escribimos todo el paso a paso para que puedas crear este toggle button como todo(a) un(a) experto(a).

Propiedades y valores en CSSClase en TailwindCSS
position: absoluteabsolute
width: 100%w-full
height: 100%w-full
opacity: 0opacity-0
display: flexflex
align-items: centeritems-center
background-color: rgb(156 163 175)bg-gray-400
height: 1.5remh-6
width: 3remw-12
border-radius: 9999pxrounded-full
background-color: rgb(255 255 255)bg-white
margin: 0.25remm-1
height: 1.25remh-5
width: 1.25remw-5

Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:

"lights-toggle-button"type="checkbox"class="absolute w-full h-full opacity-0">

Y el CSS correspondiente sería:

#lights-toggle-button:checked + label {
  background-color: MediumSpringGreen;
}

label.toggle-dot {
  transition: transform 0.3s ease;
}

#lights-toggle-button:checked + label.toggle-dot {
  transform: translateX(1.3rem);
}

Más colores nativos de CSS aquí.

Antes de terminar, añadimos el JavaScript correspondiente que también aprendimos en el reto sobre Dark Mode con Animaciones en CSS y JavaScript:

const lightsToggleButton = document.getElementById('lights-toggle-button')

function addDarkStyle (toggleButton) {
    toggleButton.addEventListener('change', () => {
      document.body.classList.toggle('dark')
    })
}

addDarkStyle(lightsToggleButton)

Finalmente el HTML de toda nuestra card quedaría de la siguiente forma:

class="glassmorphism relative grid place-items-center py-3 box-border w-full h-full cursor-pointer">

class="m-0 text-sm">Lights

class="w-8 m-2" src="https://img.icons8.com/pastel-glyph/64/000000/light--v1.png"/>"lights-toggle-button"type="checkbox"class="absolute w-full h-full opacity-0">

Paso 8: ¡Compártenos tu resultado en los comentarios!

¡Este paso es mi favorito! Compártenos en los comentarios y/o en Twitter con el hashtag #RetosPlatziCSS el resultado final de la aplicación de una casa inteligente con TailwindCSS. 😄

Aquí te comparto:

Además, cuéntanos qué otro tipo de retos te gustaría encontrar en esta sección.

#NuncaParesDeAprender

Curso Básico de Tailwind 2 y 3
Curso Básico de Tailwind 2 y 3

Curso Básico de Tailwind 2 y 3

Crea tu primer landing page utilizando Tailwind, un framework CSS que te permitirá agilizar el desarrollo de tus proyectos además de aplicar las mejores prácticas y herramientas que llegaron con Tailwind 2.0. Aprende con tu profesora Ana María Díaz (@coding_byanna).
Estefany
Estefany
teffcode

13696Puntos

hace 2 meses

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
2
8765Puntos

Gracias Teff, estos posts de CSS me guían sobre qué proyectos me puedo enfocar para mejorar mis habilidades, voy completando los cursos y te compartiré los resultados

1
961Puntos

Como haces para saber tanto? 😮 sos lo máximo Esteff!

1
13874Puntos

WOW es super bonito e interesante, Teff.
Justo estoy con HTML, CSS y JS.
Challenge accepted!

1
6668Puntos

Qué interesante! No conocía este framework de CSS (Tailwind). Vamos con un nuevo #RetosPlatziCSS. 😉💪

1
6126Puntos

Se ve genial la práctica. Ya compartiré los resultados cuando termine los cursos recomendados.