JSFiddle - React, Tailwind, and code Playground

by morz

HTML

<div><button>Create account :)</button></div>

CSS

button {
    width: 872px;
    height: 44px;
    font-family: Avenir;
        font-size: 18px;
    border: 1px solid #8c8c8c; /* stroke */
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px; /* border radius */
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; /* prevents bg color from leaking outside the border */
    background-color: rgba(202,202,202,.19); /* layer fill content */
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.8); /* drop shadow and inner shadow */
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.8); /* drop shadow and inner shadow */
    box-shadow: 0 1px 4px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.8); /* drop shadow and inner shadow */
}

button:hover{
    width: 872px;
    height: 44px;
    border: 1px solid #212121; /* stroke */
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px; /* border radius */
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; /* prevents bg color from leaking outside the border */
    background-color: rgba(66,190,255,.19); /* layer fill content */
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.8); /* drop shadow and inner shadow */
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.8); /* drop shadow and inner shadow */
    box-shadow: 0 1px 4px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.8); /* drop shadow and inner shadow */
}

button:active{
    width: 872px;
    height: 44px;
    border: 1px solid #212121; /* stroke */
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px; /* border radius */
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; /* prevents bg color from leaking outside the border...