Bordes rellenables con TailwindCSS

Iniciemos

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

Design Tools

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!

John Doe

¿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="bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg 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="group relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10"
>
  <div
    class="absolute bottom-0 left-0 h-1 w-full origin-left scale-x-0 transform bg-sky-400 duration-300 group-hover:scale-x-100"
  ></div>
  <div
    class="absolute bottom-0 left-0 h-full w-1 origin-bottom scale-y-0 transform bg-sky-400 duration-300 group-hover:scale-y-100"
  ></div>
  <div
    class="absolute top-0 left-0 h-1 w-full origin-right scale-x-0 transform bg-sky-400 duration-300 group-hover:scale-x-100"
  ></div>
  <div
    class="absolute bottom-0 right-0 h-full w-1 origin-top scale-y-0 transform bg-sky-400 duration-300 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.