how to make focus state working on div in tailwind-CSS - next.js

Question

I make a container and I want to change its background color after the user clicks that container but the problem is, it is a div, and the focus state is not working on the div but the active state is working,
this is the code link
<div className="flex space-x-3 items-center hover:bg-messenger-gray-100 focus:bg blue-50 relative p-2 rounded-lg group cursor-pointer border active:bg-blue-50">
{/* the code above on the top level div is not working*/}
{/* Focus is not working on this div */}
{/* active state works */}
<span className=" font-normal whitespace-nowrap ">Muhammad Hamza</span>
</div>
how can I make the div focusable?
Is this focus property also don't work on <span></span>?

Answer 1

You can not apply focus for div or span. However to achieve you can try one of the hack I use. You can define the thing in button.
Below is the code:
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-10">
<div class="flex space-x-3 items-center hover:bg-messenger-gray-100 relative p-2 rounded-lg group cursor-pointer border active:bg-blue-50">
<span class=" font-normal whitespace-nowrap">Muhammad Hamza</span>
</div>
<button class=" w-full flex my-4 items-start hover:bg-gray-100 p-2 rounded-lg group cursor-pointer border active:bg-blue-50 focus:bg-pink-300 focus:border-pink-500"> Muhammad Hamza with focus </button>
</div>