JSFiddle - React, Tailwind, and code Playground

by huskydawgs

HTML

<div id="wrapper-landing">
	<div id="wrapper-icons">
		<div class="icons_row">
			<div class="icons_cell1 greyBoxOnHover">
				<a href="http://en.wikipedia.org/wiki/Apple"><img alt="Gala" height="140" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" style="display:block; margin:0 auto;" width="140" /> </a>
				<p class="video-title rtecenter">
                    <a href="http://en.wikipedia.org/wiki/Apple">Wasington Apples:<br />Gala</a></p>
			</div>

</div>

CSS

#wrapper-landing {
	width: 916px;
    margin: 0 auto 50px auto;
    padding: 0;
}

.rtecenter {
    text-align: center;
}

#wrapper-icons {
    position:relative;
    width:100%;
    border: none;
    margin: 35px 0 0 0;
}

    .icons_row {
    height:100%;
    white-space:nowrap;
    }

    .icons_cell1, .icons_cell2, .icons_cell3, .icons_cell4 {
    height:100%;
    width:25%;
    display:inline-block;
    white-space:normal;
    padding-top:15px;
    }

    .greyBoxOnHover:hover {
    background-color: #e2e3e4;
}

#wrapper-landing p.video-title {
    color: #232323;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
}

#wrapper-landing p.video-title a {
    text-decoration: none;
}

#wrapper-landing p.video-title a:hover {
    text-decoration: underline;
    color: #f66511;
}