JSFiddle - React, Tailwind, and code Playground

by devgru

HTML

<div class="block status_error dark">test@bocore-demo</div>
<div class="block status_critical dark">symboldb@claudius</div>
<div class="block status_warning dark">[email protected]</div>
<div class="block status_success dark">[email protected]</div>

CSS

</style>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400italic,700,600,400"><style>
body {background: black; }
.block {
cursor: pointer;
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 17px;
height: 20px;
line-height: 20px;
margin-bottom: 5px;
padding: 5px 10px;
white-space: nowrap;
width: 354px;
}

.dark {
    color: black;
    text-shadow: 0 0 10px rgb(255,255,255), 0 0 10px rgb(255,255,255), 0 0 10px rgb(255,255,255), 0 0 10px rgb(255,255,255), 0 0 11px rgb(255,255,255), 0 0 12px rgb(255,255,255), 0 0 13px rgb(255,255,255), 0 0 14px rgb(255,255,255), 0 0 15px rgb(255,255,255);
}

JavaScript

hcl = d3.hcl
d3.select('.status_error').style('background', hcl(30, 100, 50))
d3.select('.status_critical').style('background', hcl(65, 90, 70))
d3.select('.status_warning').style('background', hcl(95, 72, 95))
d3.select('.status_success').style('background', hcl(130, 60, 90))