DEV Community

Adrián UB
Adrián UB

Posted on • Originally published at adrianub.dev on

Bordes rellenables con TailwindCSS

Para una mejor visualización, visitar página web.

Iniciemos

En primer lugar, comencemos creando una tarjeta simple:

<div
  class="block max-w-md mx-auto bg-white border border-gray-400 rounded shadow-sm"
  aria-label="View item"
  title="View item"
>
  <div class="flex items-center justify-between p-5">
    <div class="pr-4">
      <h6 class="mb-2 font-semibold leading-5">
        El universo es un lugar bastante grande
      </h6>
      <p class="text-sm text-gray-900">
        Es mucho mejor captar el universo como realmente es que persistir en la
        ilusión, por satisfactorio y reconfortante que sea.
      </p>
    </div>
    <div class="flex items-center justify-center">
      <svg
        class="w-3 text-gray-700 transition-colors duration-300 group-hover:text-indigo-600"
        fill="currentColor"
        viewBox="0 0 12 12"
      >
        <path
          d="M9.707,5.293l-5-5A1,1,0,0,0,3.293,1.707L7.586,6,3.293,10.293a1,1,0,1,0,1.414,1.414l5-5A1,1,0,0,0,9.707,5.293Z"
        ></path>
      </svg>
    </div>
  </div>
</div>

Enter fullscreen mode Exit fullscreen mode

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

<div
  class="relative block max-w-md mx-auto overflow-hidden bg-white border border-gray-400 rounded shadow-sm group"
  aria-label="View item"
  title="View item"
>
  <div
    class="absolute bottom-0 left-0 w-full h-1 duration-300 origin-left transform scale-x-0 bg-indigo-600 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-indigo-600 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-indigo-600 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-indigo-600 group-hover:scale-y-100"
  ></div>
  <div class="flex items-center justify-between p-5">
    <div class="pr-4">
      <h6 class="mb-2 font-semibold leading-5">
        El universo es un lugar bastante grande
      </h6>
      <p class="text-sm text-gray-900">
        Es mucho mejor captar el universo como realmente es que persistir en la
        ilusión, por satisfactorio y reconfortante que sea.
      </p>
    </div>
    <div class="flex items-center justify-center">
      <svg
        class="w-3 text-gray-700 transition-colors duration-300 group-hover:text-indigo-600"
        fill="currentColor"
        viewBox="0 0 12 12"
      >
        <path
          d="M9.707,5.293l-5-5A1,1,0,0,0,3.293,1.707L7.586,6,3.293,10.293a1,1,0,1,0,1.414,1.414l5-5A1,1,0,0,0,9.707,5.293Z"
        ></path>
      </svg>
    </div>
  </div>
</div>

Enter fullscreen mode Exit fullscreen mode

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.

Además, necesitaremos agregar la variante de desplazamiento de grupo a la propiedad de escala en nuestra configuración de Tailwind:

module.exports = {
  // ...
  variants: {
    scale: ['responsive', 'hover', 'focus', 'group-hover'],
  },
};

Enter fullscreen mode Exit fullscreen mode

El último paso es hacer que los bordes se vean más delgados. Para lograr esto, agregaremos un pequeño relleno de 1 px al contenedor principal y un fondo blanco al contenido. Como beneficio adicional, también podríamos escalar la carta y aumentar su sombra al pasar el mouse.

<div
  class="relative block max-w-md p-px mx-auto overflow-hidden transition duration-300 transform bg-white border border-gray-400 rounded shadow-sm hover:scale-105 group hover:shadow-xl"
  aria-label="View item"
  title="View item"
>
  <div
    class="absolute bottom-0 left-0 w-full h-1 duration-300 origin-left transform scale-x-0 bg-indigo-600 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-indigo-600 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-indigo-600 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-indigo-600 group-hover:scale-y-100"
  ></div>
  <div
    class="relative flex items-center justify-between p-5 bg-white rounded-sm"
  >
    <div class="pr-4">
      <h6 class="mb-2 font-semibold leading-5">
        El universo es un lugar bastante grande
      </h6>
      <p class="text-sm text-gray-900">
        Es mucho mejor captar el universo como realmente es que persistir en la
        ilusión, por satisfactorio y reconfortante que sea.
      </p>
    </div>
    <div class="flex items-center justify-center">
      <svg
        class="w-3 text-gray-700 transition-colors duration-300 group-hover:text-indigo-600"
        fill="currentColor"
        viewBox="0 0 12 12"
      >
        <path
          d="M9.707,5.293l-5-5A1,1,0,0,0,3.293,1.707L7.586,6,3.293,10.293a1,1,0,1,0,1.414,1.414l5-5A1,1,0,0,0,9.707,5.293Z"
        ></path>
      </svg>
    </div>
  </div>
</div>

Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)