JSFiddle - React, Tailwind, and code Playground

by Geoffrey

HTML

<p>Tayst</p>

<p>Tayst</p>

CSS

p {
    display:inline-block;
    margin: 1em;
    padding: 8px;
    color: #000;
    background: #eee;
    -moz-transition: background 1s ease, color 1.5s ease;
    cursor:pointer;
}

@-moz-keyframes auto {

    0%{
        background: #eee;
        color: #000;
    }
    50%{
        background: #aaa;
        color: #6666ff;
    }    
    100%{
        background: #ff0000;
        color: #fff;
    }
}

p:first-child:hover {
    color: #fff;
    background: #aaa;
}

p + p:hover{
    -moz-animation-name: auto;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: 1;
}