JSFiddle - React, Tailwind, and code Playground

by derekstory

HTML

<div class="presskit cf" id="logos">
     <h2>
        Logos</h2>

    <hr />
    <ul>
        <li class="logoItem"> <a href="/Catapult/media/catapult_media/press_kit/logos/Catapult-Logo-051413-RGB-Clear-Background.zip" target="_blank">1<img src="/Catapult/media/catapult_media/press_kit/logos/Catapult-Logo-051413-RGB-Clear-Background.png" /></a>
        </li>
        <li class="logoItem"> <a href="/Catapult/media/catapult_media/press_kit/logos/CatapultLogo1Color.zip" target="_blank">2<img src="/Catapult/media/catapult_media/press_kit/logos/CatapultLogo1Color.png" /></a>
        </li>
        <li class="logoItem"> <a href="/Catapult/media/catapult_media/press_kit/logos/CatapultLogoWhite.zip" target="_blank">3<img class="whiteLogo" src="/Catapult/media/catapult_media/press_kit/logos/CatapultLogoWhite.png" /></a>
        </li>
    </ul>
</div>
<br />

CSS

ul {
     list-style: none;
     -webkit-padding-start:0px;
 }

 h2 {
     clear:both;
 }
 #leaderBiosList {
     width:100%;
 }
 .presskit a:hover {
     color:#f57d3d;
 }
 .presskit a {
     color:#f57d3d;
     text-decoration:none;
     display:block;
 }
 .presskit h2 {
     font-size: 33px;
     font-weight: normal;
     padding-top:2%;
     width:33%;
 }
 .logoItem {
     float: left;;
     width: 200px; 
     height: 20px; 
     background: #999;
    margin-left: 20px;
    margin-top: 20px;

 }
 .logoItem img {
     max-width:100%;
 }
 .whiteLogo {
     background-color: #333;
 }
 .cf:before, .cf:after {
     content:"";
     display: table;
 }
 .cf:after {
     clear: both;
 }
 .cf {
     zoom: 1;
 }
 #leaderBios {
     height:20%;
 }