JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test</title>

			<link href="http://jamesrossini.com/fonts/pictos/import.css" media="screen" rel="stylesheet" type="Text/css" />
	</head>
	<body>
		
	<div class="wtf">
		<div class="button">✔</div>
	</div>
	
	</body>
</html>

CSS

.button, .button:before, .button:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    border-radius: 35px;
}

.button {
    font-family: 'pictos';
    font-size: 45px;
    line-height: 40px;
    text-align: center;
    color: rgba(0,0,0,0.5);
    text-shadow: rgba(0,0,0,0.1) 0px -2px 1px, rgb(255,255,255) 0px 1px 2px;
    
    width: 60px;
    height: 60px;
    padding: 10px;
    /*margin: 50px auto; */
    position: static;
    z-index: 50;
    cursor: pointer;
    /*margin-top: 50px; */
    
    background-color: transparent;
    border: rgba(0,0,0,0.3) 1px solid;
    border-top-color: rgba(0,0,0,0.1);
    border-left-color: rgba(0,0,0,0.2);
    border-right-color: rgba(0,0,0,0.2);
    border-bottom-color: rgba(0,0,0,0.3);
    box-shadow: inset rgba(255,255,255,0.3) -5px -30px 10px,
                inset rgba(255,255,255,0.3) 0px 30px 10px,
                inset rgba(255,255,255,1) 0px 2px 1px,
                rgba(0,0,0,0.4) 0px 10px 15px;
    -webkit-transition: -webkit-box-shadow 0s ease-in-out;
     -khtml-transition:  -khtml-box-shadow 0s ease-in-out;
       -moz-transition:    -moz-box-shadow 0s ease-in-out;
         -o-transition:      -o-box-shadow 0s ease-in-out;
            transition:         box-shadow 0s ease-in-out;
    
    background-image:   -webkit-radial-gradient(  50%   0%,  8% 50%, hsla(0,0%,100%,.2) 0%, hsla(0,0%,100%,0) 100%),
                        -webkit-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 100%),
                        -webkit-radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 100%),
                        -webkit-radial-gradient( 100%  50%, 50%  5%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 100%),
                        
                        -webkit-repeating-radial-gradient(  50% 50%, 100% 100%, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   3%, hsla(0,0%,  0%,.1) 3.5%),
                       ...