JSFiddle - React, Tailwind, and code Playground

by blackhawx

HTML

<ul class="list-hor-clean">
  <li><img class="sponsor" src="sponsor1.jpg" alt="sponsor1"></li>
  <li><img class="sponsor" src="sponsor2.jpg" alt="sponsor2"></li>
  <li><img class="sponsor" src="sponsor3.jpg" alt="sponsor3"></li>
  <li><img class="sponsor" src="sponsor4.jpg" alt="sponsor4"></li>
</ul>
<hr>

CSS

.list-hor-clean {
  padding: 0;
  margin: 0;
  list-style: none;
}

.list-hor-clean li {
  padding: 0;
  margin: 0;
  float: left;
  display: inline;
  border:solid 1px pink;
}

.sponsor {
  padding: 0;
  margin: 0;
  border: solid 1px #e0e0e0;
  max-width: 70%;
  height: auto;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
  -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}

hr {
  clear:both;
  visibility:hidden;
  height:0;
  border:0;
  font-size:0;
}