JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

<div>Cyan</div>
<div>Orange</div>
<div>Pink</div>

CSS

/* 
 * Shadow styles
 */

div:not(:hover) {
    text-shadow: 0 0 0.3em currentColor;
    box-shadow: 0 0 0.3em currentColor;
}

div:hover {
    text-shadow: 0 0 1em currentColor;
    box-shadow: 0 0 1em currentColor;
}

/* 
 * Other styles
 */

body {
    color: white;
    background-color: midnightblue;
}

div {
    float: left;
    height: 1em;
    font: 2em/1em sans-serif;
    margin: 0.5em;
    border: 0.1em solid;
    border-radius: 1em;
    padding: 0.5em;
    cursor: default;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

div:nth-child(1) { color: cyan; }
div:nth-child(2) { color: orange; }
div:nth-child(3) { color: pink; }