JSFiddle - React, Tailwind, and code Playground

by mobidevelop

HTML

<ul class="searchResults">
    <li>
<div style="width: 100%; height: 80px; overflow: hidden; position: relative;">
        <img src="http://www.choicehotels.com/media/eBrochure/ebrochure/AZ/AZ812/AZ812A2.JPG" style="width:100%;"/>
        </div>
    </li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
</ul>

CSS

ul.searchResults {
    margin: 0px;
    padding: 0px;
}
ul.searchResults:after {
  content: "";
  display: table;
  clear: both;    
}
ul.searchResults > li {
    margin: 4px 1%;
    padding: 8px;
    width: 48%;
    height: 160px;
    float: left;
    list-style: none;
    box-sizing: border-box;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
    border-radius: 2px;
}
@media (max-width: 320px) {
    ul.searchResults > li {
        width: 100%;
    }
}
@media (min-width: 481px) {
    ul.searchResults > li {
        margin: 4px 1%;
        width: 31.333%;
    }
}
@media (min-width: 960px) {
    ul.searchResults > li {
        margin: 4px 1%;
        width: 23.000%;
    }
}