Bordes rellenables con TailwindCSS
Tags: tailwindcss
Published: 2021-04-20 15:27:15

---
title: Bordes rellenables con TailwindCSS
published: true
date: 2021-04-19 00:00:00 UTC
tags: tailwindcss
canonical_url: https://adrianub.dev/blog/bordes-rellenables-con-tailwindcss
---

Para una mejor visualización, [visitar página web](https://adrianub.dev/blog/bordes-rellenables-con-tailwindcss).

## Iniciemos

En primer lugar, comencemos creando una tarjeta simple:

```html
<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>

```

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

```html
<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>

```

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:

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

```

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.

```html
<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>

```

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