JSFiddle - React, Tailwind, and code Playground

by huskydawgs

HTML

<div class="column-resources-box">
    <div class="wrap">
        <a class="apple_image" href="http://en.wikipedia.org/wiki/Apple">
            <img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" />
        </a>

        <h4 class="title-bar">Apple<br>
            Center</h4>
    </div>
<ul>
	<li>Gala</li>
	<li>Pink Lady</li>
	<li>Fuji</li>
</ul>
</div>

CSS

.wrap {
    display:inline
}
.apple_image {
    vertical-align:middle
}    

.column-resources-box {
        width: 200px;
        float: left;
        margin: 15px;
    }

        .column-resources-box img {
    margin:0 2%;
    float:left;
    height:50px;
    width:50px;
}
        }

h4.title-bar {
    color: #2251a4;
    background: none;
    font-family: 'Arial', inherit;
    font-weight: normal;
    text-transform: none;
    line-height: normal;
    margin: 0 0 0 0;
    padding: 0;
    text-align: left;
}