JSFiddle - React, Tailwind, and code Playground

by huskydawgs

HTML

<div class="wrapper-fourcol">
    <div class="column-resources-box">
        <a 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 Center</h4>
            <ul>
                <li>Gala</li>
                <li>Pink Lady</li>
                <li>Fuji</li>
                    </ul>
    </div>
    <div class="column-resources-box">
        <a href="http://en.wikipedia.org/wiki/Banana"><img alt="Bananas" height="73" src="http://www.hapadesign.com/images/bananas.jpg" width="193" /></a>
        <h4 class="resources-bar">
            <a href="http://en.wikipedia.org/wiki/Banana">WEBINAR</a></h4>
            <p align="center"><strong><a href="http://en.wikipedia.org/wiki/Banana">Bananas</a></strong></p>
    </div>

    <div class="column-resources-box">
        <a href="http://en.wikipedia.org/wiki/Orange"><img alt="Orange" height="73" src="http://www.hapadesign.com/images/Oranges.jpg" width="193" /></a>
        <h4 class="resources-bar">
            <a href="http://en.wikipedia.org/wiki/Orange">WEBINAR</a></h4>
            <p align="center"><strong><a href="http://en.wikipedia.org/wiki/Orange">Orange</a></strong></p>
    </div>

    <div class="column-resources-box">
        <a href="http://en.wikipedia.org/wiki/Pineapple"><img alt="Pineapple" height="73" src="http://www.hapadesign.com/images/Pineapples.jpg" width="193" /></a>
        <h4 class="resources-bar">
            <a href="http://en.wikipedia.org/wiki/Pineapple">WEBINAR</a></h4>
            <p align="center"><strong><a href="http://en.wikipedia.org/wiki/Pineapple">Pineapple</a></strong></p>
    </div>
</div>

CSS

.wrapper-fourcol {
    position: relative;
    width: 100%;
    margin: 25px 0;
    overflow: hidden;
}
 
.column-resources-box {
    width: 200px;
    float: left;
    margin: 15px;
}

.column-resources-box img {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto
}
    
h4.title-bar {
	    color: #2251a4;
	    background: none;
	    font-family: Times;
	    font-weight: normal;
	    text-transform: none;
	    line-height: normal;
	    margin: 1em 0 .5em 0;
	    padding: 0;
    text-align: center;
}
 
h4.resources-bar a {
font-family: Georgia;
font-size: 11px !important;
color: #ffffff !important;
background-color: #2251a4;
padding-top: 4px;
padding-bottom: 4px;
text-align: center;
text-transform: uppercase;
display: block;
}
 
h4.resources-bar a:hover {
background-color: #f66511;
color: #fff !important;
}

.title_box { 
    border: #f66511 1px dotted;
    padding: 0 5px;
}

.title_box #summary { 
    position: relative; 
    top : -0.5em;
    margin-left: 1em;
    display: inline; 
    background-color: white; 
    color: #2251a4;
font-family: SegoeBold,Helvetica,Arial;
font-size: 26px;
line-height: 34px;
margin: 0 0 10px 0;
text-align: center;
}

.title_box #content {
}