Fillable borders with Tailwind

Straight to the point, this is what we are going to build (check the hover effect):

Notice how the borders are getting filled? To achieve this effect, we don’t need to write any custom CSS or JS. Everything can be achieved with pure Tailwind.

Getting Started

First of all, let’s start by creating a simple card:

<a class="block max-w-md mx-auto bg-white border border-gray-400 rounded shadow-sm" href="#" 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">The universe is a pretty big place</h6>
            <p class="text-sm text-gray-900">It is far better to grasp the universe as it really is than to persist in delusion, however satisfying and reassuring.</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>
</a>

In the next step we’ll add the magic borders (check the hover effect):

<a class="relative block max-w-md mx-auto overflow-hidden bg-white border border-gray-400 rounded shadow-sm group" href="#" 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">The universe is a pretty big place</h6>
            <p class="text-sm text-gray-900">It is far better to grasp the universe as it really is than to persist in delusion, however satisfying and reassuring.</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>
</a>

Notice that we’ve added 4 absolute DIVs, that are stretching on hover. Don’t forget to add the relative and group classes to the main container.

Also, we’ll need to add the group-hover variant to the scale property in our Tailwind config:

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

The last step is to make the borders look thinner. To achieve this, we’ll add a small 1px padding to the main container and a white background to the content. As a bonus, we could also scale the card and increase its shadow on hover.

<a 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" href="#" 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">The universe is a pretty big place</h6>
            <p class="text-sm text-gray-900">It is far better to grasp the universe as it really is than to persist in delusion, however satisfying and reassuring.</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>
</a>

And that’s it! Grab the code and use it in your awesome projects.

These kinds of interactions and other cool stuff will be part of Kitwind (https://kitwind.io/). Subscribe below to get notified about new posts and be the first one to try out Kitwind once it’s released.