Bordes rellenables con TailwindCSS

Date

Veamos como podemos construir una card con bordes rellenables de forma sencilla sin usar Javascript o Css personalizado.

Verifique el efecto de desplazamiento

¿Observa cómo se llenan los bordes? Para lograr este efecto, no necesitamos escribir ningún CSS o JS personalizado. Todo se puede lograr con Tailwind puro.

Iniciemos

En primer lugar, comencemos creando una card simple:

<div class="px-6 pt-10 pb-8 bg-white shadow-xl ring-1 ring-gray-900/5 sm:max-w-lg sm:mx-auto sm:rounded-lg sm:px-10">
  <div>
    <!-- Aquí va la información de su card -->
  </div>
</div>

En el siguiente paso, agregaremos los bordes mágicos (verifique el efecto de desplazamiento):

<div class="relative px-6 pt-10 pb-8 bg-white shadow-xl ring-1 ring-gray-900/5 sm:max-w-lg sm:mx-auto sm:rounded-lg sm:px-10 group">
  <div
    class="absolute bottom-0 left-0 w-full h-1 duration-300 origin-left transform scale-x-0 bg-sky-400 group-hover:scale-x-100"
  ></div>
  <div
    class="absolute bottom-0 left-0 w-1 h-full duration-300 origin-bottom transform scale-y-0 bg-sky-400 group-hover:scale-y-100"
  ></div>
  <div
    class="absolute top-0 left-0 w-full h-1 duration-300 origin-right transform scale-x-0 bg-sky-400 group-hover:scale-x-100"
  ></div>
  <div
    class="absolute bottom-0 right-0 w-1 h-full duration-300 origin-top transform scale-y-0 bg-sky-400 group-hover:scale-y-100"
  ></div>
  <div>
    <!-- Aquí va la información de su card -->
  </div>
</div>

Observe que hemos agregado 4 DIV absolutos, que se estiran al pasar el mouse. No olvide agregar las clases relative y group al contenedor principal.

¡Y eso es! Toma el código y úsalo en tus increíbles proyectos.