JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contentarea">
DeviceOrientationEvent DEMO
<div id="debug"></div>     
</div>

CSS

#contentarea{
    width:300px;
    height:300px;
    border:1px red solid;
    background-image:url(http://placehold.it/300x300);
    text-align:center;
}

JavaScript

if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function () {
        var x = Math.round(event.beta || 0); // -90 :: 90
        var y = Math.round(event.gamma || 0); // -180 :: 180
       $("#debug").text(x+":"+y);
    }, false);
}else{
  $("#debug").text("DeviceOrientationEventがサポートされていません");
}