JSFiddle - React, Tailwind, and code Playground

by fuggfuggfugg

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="full-panel">
    <div class="center">
       
        <div class="trans trans-left"></div>
        <div class="trans trans-right"></div>
        <div class="trans trans-top"></div>
        <div class="trans trans-bottom"></div>
        <div class="button"> 
            
            <img src="http://www.iconsdb.com/icons/preview/white/shazam-xxl.png" width="200" height="200" />
        </div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Oxygen:400, 300);
 body {
    font-family:'Oxygen', sans-serif;
    font-weight: 300;
}
.full-panel {
    position:fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: radial-gradient(at 50% 50%, rgb(40, 137, 222) 0%, rgb(19, 112, 189) 100%);
}

.center {
    height:500px;
    width:500px;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.button {
    height:300px;
    width:300px;
    background: #003f75;
    background: -moz-linear-gradient(top, #003f75 0%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #003f75), color-stop(100%, #000000));
    background: -webkit-linear-gradient(top, #003f75 0%, #000000 100%);
    background: -o-linear-gradient(top, #003f75 0%, #000000 100%);
    background: -ms-linear-gradient(top, #003f75 0%, #000000 100%);
    background: linear-gradient(to bottom, #003f75 0%, #000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003f75', endColorstr='#000000', GradientType=0);
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: solid 1px #000000;
    -moz-box-shadow:inset 0px 2px 20px -5px rgba(0, 0, 0, 0.47), 1px 15px 30px -5px rgba(0, 0, 0, 0.68);
    -webkit-box-shadow:inset 0px 2px 20px -5px rgba(0, 0, 0, 0.47), 1px 15px 30px -5px rgba(0, 0, 0, 0.68);
    box-shadow:inset 0px 2px 20px -5px rgba(0, 0, 0, 0.47), 1px 15px 30px -5px rgba(0, 0, 0, 0.68);
    text-align:center;
    text-shadow: 4px 3px 0px #000000, 9px 8px 0px rgba(0, 0, 0, 0.15);
}
.button > img {
    margin-top: 45px;
}
.trans {
    width: 0;
    height: 0;
    border-right: 175px solid transparent;
    border-top: 175px solid transparent;
    border-left: 175px solid transparent;
    border-bottom: 175px solid transparent;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    position: absolute;
    left: -25px;
    top:...