JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<div id="no1">Nam nisi justo, cursus ut eleifend quis, egestas vitae ipsum. In hac habitasse platea dictumst. Ut arcu metus, dignissim et fringilla et, hendrerit et tellus. Aenean in odio elit. Integer hendrerit lorem eget magna semper volutpat. Sed rhoncus sodales urna, sed gravida sapien aliquam vitae. Nulla eget nisl vitae dolor facilisis lobortis eu et ligula.</div><div id="no2">Nam nisi justo, cursus ut eleifend quis, egestas vitae ipsum. In hac habitasse platea dictumst. Ut arcu metus, dignissim et fringilla et, hendrerit et tellus. Aenean in odio elit. Integer hendrerit lorem eget magna semper volutpat. Sed rhoncus sodales urna, sed gravida sapien aliquam vitae. Nulla eget nisl vitae dolor facilisis lobortis eu et ligula.</div><div id="no3">Nam nisi justo, cursus ut eleifend quis, egestas vitae ipsum. In hac habitasse platea dictumst. Ut arcu metus, dignissim et fringilla et, hendrerit et tellus. Aenean in odio elit. Integer hendrerit lorem eget magna semper volutpat. Sed rhoncus sodales urna, sed gravida sapien aliquam vitae. Nulla eget nisl vitae dolor facilisis lobortis eu et ligula.</div><div id="no4">Nam nisi justo, cursus ut eleifend quis, egestas vitae ipsum. In hac habitasse platea dictumst. Ut arcu metus, dignissim et fringilla et, hendrerit et tellus. Aenean in odio elit. Integer hendrerit lorem eget magna semper volutpat. Sed rhoncus sodales urna, sed gravida sapien aliquam vitae. Nulla eget nisl vitae dolor facilisis lobortis eu et ligula.</div><div id="no5">Nam nisi justo, cursus ut eleifend quis, egestas vitae ipsum. In hac habitasse platea dictumst. Ut arcu metus, dignissim et fringilla et, hendrerit et tellus. Aenean in odio elit. Integer hendrerit lorem eget magna semper volutpat. Sed rhoncus sodales urna, sed gravida sapien aliquam vitae. Nulla eget nisl vitae dolor facilisis lobortis eu et ligula.</div>
<h1>HIT YOUR DESK</h1>

CSS

html, body {
    height: 100%;
}
div {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 250px;
    background: rgba(0,0,0,.2);
    padding: 10px;
    
    transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in;
}

div#no1 {
    bottom: 10%;
    left: 15%;
}

div#no2 {
    bottom: 30%;
    left: 80%;
}

div#no3 {
    bottom: 50%;
    left: 5%;
}

div#no4 {
    bottom: 60%;
    left: 50%;
}

div#no5 {
    bottom: 70%;
    left: 10%;
}

h1 {
    position: absolute;
    bottom: 85%;
    left: 40%;
    font-size: 40px;
    color: red;
    transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in;
}

.drop {
    bottom: -10% !important;
     -moz-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
    
}

JavaScript

var $drop = $("div, h1"), beta;

window.ondeviceorientation = function(event){

    if( !beta ){
        beta = Math.ceil( event.beta );
    }else{
        if( beta > ( Math.ceil( event.beta ) + 1) ){
            $drop.addClass("drop");        
        }       
    }

}