JSFiddle - React, Tailwind, and code Playground

by Nick Karnik

HTML

<div class=images>
    <ul>
        <li>
            <img src="http://3.bp.blogspot.com/-xd-O8aF3LFQ/US4DYBNdw7I/AAAAAAAAGo0/38lZ_Mx-I2w/s1600/Baby+White+lion+Picture+1.jpg" alt="">
        </li>
            
 <li>
            <img src="http://3.bp.blogspot.com/-xd-O8aF3LFQ/US4DYBNdw7I/AAAAAAAAGo0/38lZ_Mx-I2w/s1600/Baby+White+lion+Picture+1.jpg" alt="">
        </li>
      <li>
            <img src="http://3.bp.blogspot.com/-xd-O8aF3LFQ/US4DYBNdw7I/AAAAAAAAGo0/38lZ_Mx-I2w/s1600/Baby+White+lion+Picture+1.jpg" alt="">
        </li>
           <li>
            <img src="http://3.bp.blogspot.com/-xd-O8aF3LFQ/US4DYBNdw7I/AAAAAAAAGo0/38lZ_Mx-I2w/s1600/Baby+White+lion+Picture+1.jpg" alt="">
        </li>
                <li>
            <img src="http://3.bp.blogspot.com/-xd-O8aF3LFQ/US4DYBNdw7I/AAAAAAAAGo0/38lZ_Mx-I2w/s1600/Baby+White+lion+Picture+1.jpg" alt="">
        </li>
                     <li>
            <img src="http://3.bp.blogspot.com/-xd-O8aF3LFQ/US4DYBNdw7I/AAAAAAAAGo0/38lZ_Mx-I2w/s1600/Baby+White+lion+Picture+1.jpg" alt="">
        </li>
                          <li>
            <img src="http://3.bp.blogspot.com/-xd-O8aF3LFQ/US4DYBNdw7I/AAAAAAAAGo0/38lZ_Mx-I2w/s1600/Baby+White+lion+Picture+1.jpg" alt="">
        </li>
    </ul>
</div>

CSS

.images {
    background-color: darkgray;
    width: 400px
}

.images img {
    width: 100px;
    height :100px;
}

.images li {
    width: 100px;
    height: 100px;
    list-style-type: none;
    display: inline-block;
    margin: 20px;
    border: solid 10px white;
}