JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
#app-container { background-color:#f6f6f6; }
#app-container ul.apps { list-style:none; }
#app-container ul.apps li { float:left; width:70px; height:90px; margin:0 10px 10px 0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px; border: 4px solid; padding:10px; position:relative; }
#app-container ul.apps li a { text-decoration:none;}


#app-container ul.apps li.app1 { border-color:#57b6dd; background:url(app-icons/app1.png) no-repeat 10px 10px; }
#app-container ul.apps li.app1:hover { background:#57b6dd url(app-icons/app1-hover.png) no-repeat 10px 10px; color: #fff; }
#app-container ul.apps li.app1 span { font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; display:block; text-align:right; bottom: 10px; right: 10px; position:absolute; }
#app-container ul.apps li.app1 a { color: #57b6dd; }
#app-container ul.apps li:hover a:hover { color: #fff; }



</style>
</head>

<body style="background-color:#f6f6f6;">
<div id="app-container">
<ul class="apps">
  <li class="app1"> 
      <a title href="#" class="blocklink">
            <span>ANOTHER APP</span>
      </a> 
    </li>
  <li class="app1"> 
      <a title href="#" class="blocklink">
            <span>ANOTHER APP</span>
      </a> 
    </li>
</ul>
</div>
</body>
</html>

CSS

.app1 {position:relative;}
.blocklink{position:absolute;top:0px;left:0px;width:100%;height:100%;}