JSFiddle - React, Tailwind, and code Playground

by kaikemono

HTML

<div class="subnav">
    <a href="#">
        <img src="http://placekitten.com/g/80/80" />
        Computers
    </a>
</div>

<div class="subnav">
    <a href="#">
        <img src="http://placekitten.com/g/80/80" />
        Computer Accessories
    </a>
</div>

<div class="subnav">
    <a href="#">
        <img src="http://placekitten.com/g/80/80" />
        Monitors
    </a>
</div>

<div class="subnav">
    <a href="#">
        <img src="http://placekitten.com/g/80/80" />
        Printers
    </a>
</div>

<div class="subnav">
    <a href="#">
        <img src="http://placekitten.com/g/80/80" />
        Software
    </a>
</div>

<div class="subnav">
    <a href="#">
        <img src="http://placekitten.com/g/80/80" />
        Department Licensing
    </a>
</div>

CSS

div.subnav {
    background: #fff url('http://dl.dropbox.com/u/90501/forrst/bg_cropped.png') repeat-x 0 64%;
    border: 2px solid #e8e3c9;
    box-shadow: 5px 5px 10px rgba(000,000,000,0.25); -moz-box-shadow: 5px 5px 10px rgba(000,000,000,0.25); -webkit-box-shadow: 5px 5px 10px rgba(000,000,000,0.25);
    float: left;
    margin: 15px;
    text-align: center;
}

div.subnav a {
    background-color: #fff;
    color: #000;
    display: block;
    font-size: 13px;
    font-weight: bold;
    line-height: 15px;
    margin: 30px;
    padding: 10px;
    text-decoration: none;
    width: 130px; height: 130px;
}

div.subnav img {
    display: block;
    margin: 0 auto 20px;
}