JSFiddle - React, Tailwind, and code Playground

HTML

<div class="firefly">
    <div class="eyes left"></div>
    <div class="eyes right"></div>
    <div class="wings small one"></div>
    <div class="wings big one"></div>
    <div class="wings small two"></div>
    <div class="wings big two"></div>
    <div class="feelers left"></div>
    <div class="feelers right"></div>
</div>

CSS

body{
                background: #e3dc10 url("noisepng.com/100-90-5.png");
                font: 20px/20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
            }
            .firefly{
                width: 278px; /* 307 */
                height: 20px; /* 64 */
                background-image: -webkit-linear-gradient(right, #34280e 25%,
                
                                                                 #0e9258 25%,
                                                                 #0e9258 50%,
                                                         
                                                                 #c6972f 50%,
                                                                 #c6972f 75%,
                                                         
                                                                 #0e9258 75%);
                border-radius: 10px;
                position: relative;
                zoom: 50%;
                -webkit-transform-origin: 100% center;
            }
            .firefly .eyes{
                width: 31px;
                height: 31px;
                background: -webkit-linear-gradient(right, #34280e 50%, #0e9258 50%);
                border-radius: 50%;
                position: relative;
                top: -21px;
                left: -29px;
            }
            .firefly .eyes.left{
                top: -23px;
            }
            .firefly .eyes.right{
                top: -19px;
            }
            .firefly .wings{
                position: absolute;
            }
            .firefly .wings.small{
                border-left: 29px solid transparent;
                border-right: 29px solid transparent;
            }
            .firefly .wings.small.one{
                border-bottom: 111px solid rgba(255, 255, 255, .5);
                border-radius: 0 0 50% 50%;
                top: 19px;
                -webkit-transform-origin: center 0%;
              ...

JavaScript

$(document).ready(function() {
    $(document).mousemove(function(e) {
        $(".firefly").css({
            "top": (e.pageY * 2) + "px",
            "left": (e.pageX * 2 + 130) + "px"
        });
    })
})
var img = $(".firefly");
if (img.length > 0) {
    var offset = img.offset();

    function mouse(evt) {
        var center_x = (offset.left) + (img.width() / 2);
        var center_y = (offset.top) + (img.height() / 2);
        var mouse_x = evt.pageX;
        var mouse_y = evt.pageY;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + 90;
        img.css('-moz-transform', 'rotate(' + degree + 'deg)');
        img.css('-webkit-transform', 'rotate(' + degree + 'deg)');
        img.css('-o-transform', 'rotate(' + degree + 'deg)');
        img.css('-ms-transform', 'rotate(' + degree + 'deg)');
    }
    $(document).mousemove(mouse);
}