JSFiddle - React, Tailwind, and code Playground

by digitalicarus

HTML

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

CSS

.__joystick {
    opacity: 0.3;
    position: absolute;
    left: 50%;
    top: 20%;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    border-radius: 50%;
    border: 1px solid #444;
    margin: 0;
    padding: 0;
}        
.__joystick > div {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    margin-top: -15px;
    border-radius: 50%;
    border: 1px solid #444;
    background: #ddd;
}

JavaScript

var JStick = function() {

    //$('head').append(style);
    this.JS = $('<div class="__joystick" "><div></div></div>');
};

var js = new JStick();
$('body').append(js.JS);