JSFiddle - React, Tailwind, and code Playground

by Jan Høydahl

HTML

<div class="leader">Leader</div>
<div class="active">Active</div>
<div class="recovering">Recovering</div>
<div class="down">Down</div>
<div class="failed">Recovery failed</div>
<gone>Gone</gone>
<div class="inactive">Inactive</div>

CSS

body {
  font-family: sans-serif;
}
div.leader {
  color: black;
  font-weight: bold;
}
div.active {
  color: black;
}
div.recovering {
  color: yellow;
  font-style: italic;
}
div.down {
  color: orange;
  text-decoration: line-through;
}
div.failed {
  color: red;
  font-weight: bold;
  font-style: italic;
}
div.inactive {
  color: grey;
  text-decoration: line-through;
}

gone {
  color: grey;
  text-decoration: none;
  position: relative;
}
gone:after {
    content: ' ';
    font-size: inherit;
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    top: 40%;
    bottom: 40%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}