[Beginner with Tailwind]
Hi everyone 👋 I tried to make an isometric button with Tailwind. My plans are to make a div which will be the background of my button, and a second div for the front, the surface where I we can click on it.
And inside my background div's, I make two another surface to cover the angle of my button with the same color of the background of my button for make an optical illusion you believe in isometric 3D.
There's the code of my component :

export default function NewButton(): JSX.Element {

    return (

        // BUTTON
        <button className="relative text-xl font-thin">

            {/* BACKGROUND */}
            <div className="absolute inset-0 h-full top-4 -bottom-4 left-4 -right-4 bg-red-500 border-b-2 border-r-2 border-red-900">

                <div className="absolute -z-10 bottom-0 left-0 w-4 h-[calc(5.65685424949%+1.19rem)] bg-red-500 border-l-2 border-red-900 origin-bottom-left -rotate-45">
                </div>
                <div className="absolute -z-10 top-0 right-0 w-[calc(5.65685424949%+0.78rem)] h-4 bg-red-500 border-t-2 border-red-900 origin-top-right rotate-45">
                </div>
            </div>

            {/* TEXT */}
            <div className="relative bg-gray-100 border border-gray-500 w-44 h-16 transition transform hover:translate-y-2 hover:translate-x-2 active:translate-y-4 active:translate-x-4">
                HOVER
            </div>
        </button>

    )

}

For these w-[calc(5.65685424949%+0.78rem)] and h-[calc(5.65685424949%+1.19rem)] I put an approximative value for cover exactly the diagonal between the front and the background of the button. In addition, i don't know how i can hover/active a div with another div.
I don't know if this is the exact way for making an 3D Isometric button with Tailwind, and I would like to know how i can make it more beautiful, or not ?
I thank you in advance 🙂