JSFiddle - React, Tailwind, and code Playground

by devgru

HTML

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

CSS

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

.status_error {
    border-color: #ff6c6f;
    color: #ff6c6f;
}


.status_critical {
    border-color: #ff8300;
    color: #ff8300;
}


.status_warning {
    border-color: #fee350;
    color: #fee350;
}

JavaScript

hcl = d3.hcl

console.log(hcl(30, 100, 80).toString());
console.log( hcl(62, 100, 70).toString())
console.log(hcl(95, 72, 90).toString())
console.log( hcl(130, 60, 90).toString())