JSFiddle - React, Tailwind, and code Playground

by _jro

HTML

<div class="w">
    <div class="applefeature">
        <a href="">
            <img src="http://f.cl.ly/items/0I0O3H1b0k2X0n3U2y2J/nav_apps_icon.png" alt="App Store">
            <h4>Apps</h4>
        </a>
    </div>
</div>

CSS

.w { padding: 10px 12px; }
.applefeature {
height: 150px;
margin: 8px;
vertical-align: top;
display: inline-block;
}

.applefeature a {
display: block;
width: 168px;
height: 140px;
border: 1px solid #ccc;
color: #333;
text-decoration: none;
font-weight: bold;
line-height: 1.3em;
background: #f7f7f7;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.applefeature a:hover {
background: #fafafa;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f7f7f7));
background: -moz-linear-gradient(100% 100% 90deg, #f7f7f7, #fff);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.3); 
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3); 
box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px;
}

.applefeature a img { 
display: block;
margin: 26px auto 4px;
}
.applefeature a h4 {
display: block;
width: 160px;
font-size: 1.3em;
font-family: Arial, Tahoma, sans-serif;
color: #646464;
text-align: center;
}
.applefeature a:hover h4 {
color: #787878;
}