JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<ul class="item-list clear-fix">

    <li>
        <a href="#" class="thumbnail"> <!-- we both know you intend these to be a list of links -->
            <img src="http://placehold.it/100x100" alt="thumbnail" />
            <h3>Caption</h3> <!-- arbitrary img size -->
        </a>
    </li>
    
    <li>
        <a href="#" class="thumbnail">
            <img src="http://placehold.it/100x100" alt="thumbnail" />
            <h3>Caption</h3> <!-- arbitrary img size -->
        </a>
    </li>
    
    <li>
        <a href="#" class="thumbnail">
            <img src="http://placehold.it/100x100" alt="thumbnail" />
            <h3>Caption</h3> <!-- arbitrary img size -->
        </a>
    </li>
    
    <li>
        <a href="#" class="thumbnail">
            <img src="http://placehold.it/100x100" alt="thumbnail" />
            <h3>Caption</h3> <!-- arbitrary img size -->
        </a>
    </li>
    
    <li>
        <a href="#" class="thumbnail">
            <img src="http://placehold.it/100x100" alt="thumbnail" />
            <h3>Caption</h3> <!-- arbitrary img size -->
        </a>
    </li>
    
    <li>
        <a href="#" class="thumbnail">
            <img src="http://placehold.it/100x100" alt="thumbnail" />
            <h3>Caption</h3> <!-- arbitrary img size -->
        </a>
    </li>
    
    <li>
        <a href="#" class="thumbnail">
            <img src="http://placehold.it/100x100" alt="thumbnail" />
            <h3>Caption</h3> <!-- arbitrary img size -->
        </a>
    </li>
    
    <li>
        <a href="#" class="thumbnail">
            <img src="http://placehold.it/100x100" alt="thumbnail" />
            <h3>Caption</h3> <!-- arbitrary img size -->
        </a>
    </li>
    
</ul> <!-- .item-list>

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* use box-sizing --- it moves the padding inside the box instead of outside ... win! */

html, body { /* basic reset */
    margin: 0;
    padding: 0;
}

.item-list {
    padding: 0;
    list-style: none;
    width: 100%;
    max-width: 30em; /* arbitrary width */
    
    border: 3px solid red;
    /* see this ? this is not containing its elements... */ 
    /* but it has nothing to do with the problem described */
    /* uncomment the class below to fix it */
}

/* .clear-fix:before,
.clear-fix:after {
    content: " ";
    display: table;
}
.clear-fix:after {
    clear: both;
}
 */


.item-list li {
    display: inline-block;
    float: left;
    width: 33.33333%;
    border: 1px solid #999;
}

.thumbnail {
    width: 100%;
}

.thumbnail img {
    display: block;
    width: 100%;
    height: auto;
}