export function FlipCardButton() {
  return (
    <div className="bg-[#FAFAF8] p-12 grid place-items-center">
      <style>{`
        .flip-btn {
          perspective: 600px;
          background: transparent;
          border: 0;
          padding: 0;
          cursor: pointer;
        }
        .flip-inner {
          position: relative;
          width: 220px;
          height: 52px;
          transform-style: preserve-3d;
          transition: transform .55s cubic-bezier(.4, .2, .2, 1);
        }
        .flip-btn:hover .flip-inner { transform: rotateX(180deg); }
        .flip-btn:active .flip-inner { transform: rotateX(180deg) scale(.97); }
        .flip-face {
          position: absolute;
          inset: 0;
          display: grid;
          place-items: center;
          border-radius: 10px;
          font-size: 14px;
          font-weight: 500;
          backface-visibility: hidden;
        }
        .flip-front {
          background: #111;
          color: #FAFAF8;
          border: 1px solid #111;
        }
        .flip-back {
          background: #FAFAF8;
          color: #111;
          border: 1px solid #111;
          transform: rotateX(180deg);
        }
      `}</style>
      <button type="button" className="flip-btn">
        <span className="flip-inner">
          <span className="flip-face flip-front">View details →</span>
          <span className="flip-face flip-back">Open in new tab ↗</span>
        </span>
      </button>
    </div>
  );
}
Flip Card Button
