JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fgnass.github.io/spin.js/spin.js"></script>
<script src="http://fgnass.github.io/spin.js/jquery.spin.js"></script>
<div id="wrapper"><div id="content"></div></div>

CSS

#content {
    background-color:lightyellow;
    text-align:middle;
    height:200px;
    color:green;
    position: relative;
}
#wrapper{
    border:1px solid black;
}

JavaScript

$(document).ready(function () {
    var opts = {
        lines: 17, // The number of lines to draw
        length: 26, // The length of each line
        width: 12, // The line thickness
        radius: 3, // The radius of the inner circle
        corners: 1, // Corner roundness (0..1)
        rotate: 0, // The rotation offset
        direction: 1, // 1: clockwise, -1: counterclockwise
        color: '#000', // #rgb or #rrggbb or array of colors
        speed: 1.1, // Rounds per second
        trail: 74, // Afterglow percentage
        shadow: true, // Whether to render a shadow
        hwaccel: false, // Whether to use hardware acceleration
        className: 'spinner', // The CSS class to assign to the spinner
        zIndex: 2e9, // The z-index (defaults to 2000000000)
        top: '50%', // Top position relative to parent in px
        left: '50%' // Left position relative to parent in px
    };

    //$('#content').spin(opts);
    
    var target = document.getElementById('content');
    opts.color = getComputedStyle(target).getPropertyValue("color");
    var spinner = new Spinner(opts).spin(target);
});