[SOLVED] How can I create a 3D-looking button in React (TSX) with shadows like this example?

How can I create a 3D-looking button in React (TSX) with shadows like this example?

I'm trying to create a button in my React project using TypeScript (TSX) that has a 3D look similar to the one in the attached image:

It appears to have a raised, layered effect with a shadow that gives it a sense of depth. The front face is green, with visible shadows to the left, bottom, and right that give it a blocky, almost isometric look.

How can I replicate this style in TSX and CSS? I'm particularly looking for guidance on:

How to structure the JSX for such a button (e.g., div layers?)
How to use CSS (or Tailwind if possible) to create this shadow and 3D effect
How to keep it responsive and clean?

Solution

Here is the replication of the button in tailwind css https://play.tailwindcss.com/aoYLZ1DqO4.

and here is an example of it in tsx :

export default function ShadowButton() {
  return (
  <div className="relative">
    <div className="absolute z-10 h-10 w-[120px] cursor-pointer border-[none] bg-[#2eaa50] text-center leading-10 tracking-[0.4em] text-[white] select-none before:absolute before:bottom-2.5 before:left-[-25px] before:h-2.5 before:w-10 before:rotate-90 before:skew-x-[45deg] before:bg-[#50b052] before:content-[''] after:absolute after:-bottom-2.5 after:left-[-5px] after:h-2.5 after:w-[120px] after:rotate-0 after:skew-x-[-45deg] after:bg-[#237636] after:content-['']">
      CLICK
    </div>
    <div
      style={{
        clipPath:
          "polygon(11% 0, 85% 0, 100% 19%, 100% 80%, 100% 100%, 9% 100%, 0 93%, 0% 20%)"
      }}
      className="absolute left-[-10px] h-15 w-[140px] bg-black opacity-15"
    />
  </div>
  );
}