Reduce clickable area for <a> with Tailwind CSS

Issue

I'm using Tailwind CSS and I recently created a link using <a>, <p> and <div>. But the clickable area from <a> tag is bigger than I want, I just want in the text, but the box are in div.

I'll show my code:

<div class="mt-5">
  <a :href="route('login')" class="flex justify-center">
    <img src="../../Assets/Img/menorq.svg" class="w-4 h-4 mt-1" alt="">
    <p class="text-purple-600">Back to login</p>
  </a>
</div>

Here's how it's going:

Solution

You can shrink the anchor's flex box to contain just the content by using inline-flex and then center the content inside the surrounding div. For example:

<div class="mt-5 text-center">
  <a :href="route('login')" class="inline-flex align-center">
    <img src="../../Assets/Img/menorq.svg" class="w-4 h-4 mt-1" alt="">
    <p class="text-purple-600">Back to login</p>
  </a>
</div>

Answered By - Ed Lucas