JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="phone">
        <div class="top"></div>
        <div class="front"></div>
        <div class="bottom">
            <div class="charge">&nbsp;</div>
        </div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <br>
    <div id="alpha"></div>
    <div id="beta"></div>
    <div id="gamma"></div>
</div>

CSS

.wrap {
            perspective: 400px;
            perspective-origin: 50% 100px;
            position: absolute;
            top: 100px;
            left: 10px;
            height: 190px;
            width: 230px;
            padding-top: 40px;
            background: linear-gradient(0deg, #a1e0e0 30%, #dcf9ff 36%);
            border: solid 1px #AAA;
        }

        .phone {
            transform-style: preserve-3d;
            transform: rotateX(45deg) rotateY(45deg);
            height: 170px;
            width: 72px;
            transform-origin: center;
            margin: auto;
        }

        .phone div {
            background: #cccccc;
        }

        .front, .back {
            background: #000 !important;
            background-size: cover !important;
            width: 72px;
            height: 150px;
        }


        .back {
            transform: translateZ(-10px) rotateY(180deg) translateY(-160px);
          background:silver;
        }

        .top, .bottom {
            height: 10px;
            width: 72px;
        }

        .top {
            transform: rotateX(90deg);
            transform-origin: bottom;
        }

        .bottom {
            transform: rotateX(90deg) translateY(-10px);
            transform-origin: top;
            padding-top: 2px;
            height: 8px;
        }

        .left, .right {
            height: 150px;
            width: 10px;
        }

        .left {
            transform: translateY(-310px) translateZ(-10px) rotateY(-90deg);
            transform-origin: left;
        }

        .right {
            transform: translateY(-460px) translateZ(-10px) translateX(62px) rotateY(90deg);
            transform-origin: right;
            background: #666 !important;
            background-size: cover !important;
            background-position-x: 10px !important;
        }

        .charge {
            width: 13px;
            margin: auto;
            background: #333333 !important;
           ...

JavaScript

function degreesToRadians (deg) {
    return deg * Math.PI / 180;
}

class EulerAngles {
  constructor(alpha, beta, gamma) {
    this.alpha = alpha;
    this.beta = beta;
    this.gamma = gamma;
  }
  
  toRotate3DString() {
    const gammaAxisY = -Math.sin(degreesToRadians(this.beta));
    const gammaAxisZ = Math.cos(degreesToRadians(this.beta));
    const axis = {
      alpha: [0, 1, 0],
      beta: [-1, 0, 0],
      gamma: [0, gammaAxisY, gammaAxisZ]
    };
    return (
      "rotate3d(" +
      axis.alpha.join(",") +
      "," +
      this.alpha +
      "deg) " +
      "rotate3d(" +
      axis.beta.join(",") +
      "," +
      this.beta +
      "deg) " +
      "rotate3d(" +
      axis.gamma.join(",") +
      "," +
      this.gamma +
      "deg)"
    );
  }
}

function ready(fn) {
  if (
    document.attachEvent
      ? document.readyState === "complete"
      : document.readyState !== "loading"
  ) {
    fn();
  } else {
    document.addEventListener("DOMContentLoaded", fn);
  }
}

ready(() => {
  let alpha = document.querySelector("#alpha");
  let beta = document.querySelector("#beta");
  let phone = document.querySelector(".phone");
  window.addEventListener("deviceorientation", event => {
    alpha.innerHTML = "alpha: "+event.alpha;
    beta.innerHTML = "beta: "+event.beta;
    gamma.innerHTML = "gamma: "+event.gamma;
    const eulerAngles = new EulerAngles(event.alpha, -90 + event.beta, event.gamma)
    phone.style.transform = eulerAngles.toRotate3DString();
  });
});