JSFiddle - React, Tailwind, and code Playground

by karin

HTML

<button><span class="checkout">&#9733</span> Checkout <span class="checkout">&#9733</span></button>

CSS

body{
	background:#9CC;}
button{
	background-color:#eee;
	
	background-image: -moz-linear-gradient(top, #eee, #BDBFBF);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#BDBFBF));
    background-image: -webkit-linear-gradient(top, #eee, #BDBFBF);
    background-image: -o-linear-gradient(top, #eee, #BDBFBF);
    background-image: linear-gradient(to bottom, #eee, #BDBFBF);
    background-repeat: repeat-x;
	
	font-family:Tahoma, Geneva, sans-serif;
	font-weight:bold;
	font-size:36px;
	color:#666;
	text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);
	padding:1em;
	margin:2em;
	text-transform:uppercase;
	border:2px solid #878787;
	box-shadow:
        inset 0 0 0 3px #eee,
        inset 0 0 0 8px #ddd,
        inset 0 0 0 9px #A3A3A3;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px; /* future proofing */
	-khtml-border-radius: 12px;
	letter-spacing: 1px;
	}
	
.checkout{
	color:#999;}