JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tile">
    <a href="" title="Forum">
        <div class="tile_plate">
            <img src="Images/help.png" border="0" width="16" height="16" alt="(?)" title="title...." />
            <h1>Forum</h1>
            <h2>Visit our Forum</h2>
        </div>
    </a>
</div>                                        

<div class="tile">
    <a href="" title="Check a Player">
        <div class="tile_plate">
            <img src="Images/help.png" border="0" width="16" height="16" alt="(?)" title="title..." />
            <h1>PlayerCheck</h1>
            <h2>I want to check the stats of an individual player</h2>
        </div>
    </a>
</div>                                        

<div class="tile">
    <a href="" title="View the Player History">
        <div class="tile_plate">
            <img src="Images/help.png" border="0" width="16" height="16" alt="(?)" title="title..." />
            <h1>PlayerHistory</h1>
            <h2>I want to search a player in the database</h2>
        </div>
    </a>
</div>                                        

<div class="tile">
    <a href="" title="Check a Server">
        <div class="tile_plate">
            <img src="Images/help.png" border="0" width="16" height="16" alt="(?)" title="title..." />
            <h1>ServerCheck</h1>
            <h2>I want to check all players on my game server</h2>
        </div>
    </a>
</div>

CSS

*{
    margin: 0;
    padding: 0;
}
body{
    font-family:sans-serif,Arial,Helvetica;
    font-size:15px;
    color:#9D9D9D;
    padding:8px;
    background-color: #000000; 
}  
.tile{
    padding:10px;
    margin:10px;
    display:inline-block;
    vertical-align:top;
    background:#131313;
    border-radius:7px;
    box-shadow:3px 3px 5px 0px #000000 inset,
        1px 1px 3px 0px #4D4D4D;
}
.tile:hover{
    background:#53A1DE;
}
.tile a{
    text-decoration:none;
}
.tile a:link{
}
.tile a:visited{
}
.tile a:hover{
}
.tile a:active{
}

.tile_plate{
    height:150px;
    width:150px;
    background:#131313;
    border-radius:4px;
    box-shadow:1px 1px 2px 0px #808080 inset,
        2px 2px 3px 0px #000000;
}
.tile_plate:active{
    background:#131321;
    box-shadow:1px 1px 2px 0px #C0C0C0 inset,
        1px 1px 1px 0px #000000;
}

.tile_plate h1{
    padding:10px;
    display:block;
    text-align:center;
    font-size:20px;
    font-weight:normal;
    color:#808080;
    text-shadow:0px 0px 0px #000000;
}
.tile_plate:hover h1{
    color:#C0C0C0;
}

.tile_plate h2{
    padding:10px;
    display:block;
    text-align:center;
    font-size:15px;
    font-weight:normal;
    color:#363E3E;
    text-shadow:0px 0px 0px #000000;
}
.tile_plate:hover h2{
    color:#53A1DE;
}

.tile_plate img{
    cursor:help;
    position:relative;
    vertical-align:middle;
    top:128px;
    left:130px;
    opacity:0.3;
}
.tile_plate img:hover{
    opacity:1;
}