JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function onLoad() {
                if (!window.DeviceOrientationEvent) {
                    alert('No hay soporte para DeviceOrientationEvent');
                }else{
                    window.addEventListener("deviceorientation", orientacion, true);
                }
                
            }
            function orientacion(event) {
                document.querySelector('.absolute').innerHTML = event.absolute;
                document.querySelector('.alpha').innerHTML = event.alpha;
                document.querySelector('.beta').innerHTML = event.beta;
                document.querySelector('.gamma').innerHTML = event.gamma;
            }
        </script>
    </head>
    <body onload="onLoad();">
        Absolute: <div class="absolute"></div>
        Alpha: <div class="alpha"></div>
        Beta: <div class="beta"></div>
        Gamma: <div class="gamma"></div>
    </body>
</html>