JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.xarg.org/download/jquery.xcolor.js"></script>
<div class="base-div">
</div>

<div class="white-div"> 
</div>

<div class="black-div">  
</div>

<p></p>

CSS

div{
    margin-bottom: 10px;
    width: 100px;
    height: 100px;
    border: 2px solid #000;
}

.base-div{
    background-color: #359eff;
}

p{
   color: #777;
}

p span {
   color: #000;
}

JavaScript

$(function() {
    LoadColors();
});

function LoadColors(){
    var baseColor = '#359eff';
    var black50 = $.xcolor.opacity('black', baseColor, 0.5);
    var white50 = $.xcolor.opacity('white', baseColor, 0.5);
    
    $('div.white-div').css('background-color', white50);
    $('div.black-div').css('background-color', black50);
    
    $('p').text('white opacity: ' + white50 + 
                ' , black opacity:' + black50);
    
}