JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Testing :active, :hover, etc.</title>
    </head>
    <body>
        <a href="#" class="foo" onclick="return false;">link</a>
        <button class="foo">button</button>
        <input type="button" class="foo" value="input">
    </body>
</html>

CSS

body {
    background-color: #fff;
    color: #000;
}

.foo {
    background-color: #ff0000;
}

.foo:focus {
    background-color: #00ff00;
}

.foo:hover {
    background-color: #0000ff;
}

.foo:active {
    background-color: #00ff00;
}