JSFiddle - React, Tailwind, and code Playground

by S1l3

HTML

<div id="channelChooser">
   <ul id="firstList" class="list clearfix">
      <li class="listItem">
         <div class="imageContainer">
            <div class="actualImage">
            </div><!-- The actual project item, custom size larger than the set parameters-->
         </div><!-- Acts as a overflow hidden resizable container depending the viewing device…..RESONSIVE SHIZZ -->
      </li><!-- Holds a project item -->
       <li class="listItem">
         <div class="imageContainer">
            <div class="actualImage">
            </div><!-- The actual project item, custom size larger than the set parameters-->
         </div><!-- Acts as a overflow hidden resizable container depending the viewing device…..RESONSIVE SHIZZ -->
      </li><!-- Holds a project item -->
   </ul>
   <div class="clearfix"></div><!-- Sorts out the annoying bug -->
</div><!-- Slider to pick an image to view full size in the viewingRoom -->

CSS

ul.list         {
        /* Refer to media queries for dimensions. */
        margin: 0;
}

ul.list li      {
        float: left;
        margin: 0 0 0 0;
        display: inline-block;
}

.imageContainer {
        border: 4px solid rgb(255,255,255);
        box-shadow: 0 0 1px rgb(112,112,112);
        overflow: hidden;
        background: white;
        width: 247px;
        height: 149px;
}