JSFiddle - React, Tailwind, and code Playground

by secondfre

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<link href='http://fonts.googleapis.com/css?family=VT323|Geostar+Fill' rel='stylesheet' type='text/css'>
 
<title>Mario Block</title>
 
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 
</head>
 
<body>
 
    
    <div id="container">
        <div class="blockWrapper">
           <p class="tip">Firepower</p>
           <a href="#"><p class="block">?</p></a>
        </div>
        
        <div class="blockWrapper">
            <p class="tip">Mushroom</p>
            <a href="#"><p class="block">?</p></a>
        </div>
        
        <div class="blockWrapper">
            <p class="tip">Star</p>
            <a href="#"><p class="block">?</p></a>
        </div>
        
        <div class="blockWrapper">
            <p class="tip">Leaf</p>
            <a href="#"><p class="block">?</p></a>
        </div>
    </div>
    
    
 
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}

a {
    color: white;
    text-decoration: none;
}

#container {
    width: 627px;
    margin: 0 auto;
}

.blockWrapper {
    width: 156px;
    margin: 10px auto;
    float: left;
}

.tip {
    color: black;
    font: bold 18px/4.5 Helvetica, sans-serif;
    float: left;
    text-align: center;
    width: 156px;
    opacity: 0;
    -webkit-transition: opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
}

.blockWrapper:hover .tip {
    opacity: 1;
}

.block {
    /*Dimensions*/
    height: 150px;
    width: 150px;
    overflow: hidden;
    
    /*Box Styling*/
    background: #f6da17;
    border: 3px solid black;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    box-shadow: inset -4px -4px 1px #d6a12d;
    -moz-box-shadow: inset -4px -4px 1px #d6a12d;
    -webkit-box-shadow: inset -4px -4px 1px #d6a12d;
    
    /*Text Styling*/
    color: white;
    text-align: center;
    font: bold 165px/150px 'Geostar Fill', cursive;
    text-shadow: 4px 4px 0 #000;
    
}

p.block {
    -webkit-animation: mariomation 2s infinite linear;
    -moz-animation: mariomation 2s infinite linear;
}

@-webkit-keyframes mariomation {
    0% {text-indent: -300px;}
    100% {text-indent: 300px;}
}

@-moz-keyframes mariomation {
    0% {text-indent: -300px;}
    100% {text-indent: 300px;}
}