JSFiddle - React, Tailwind, and code Playground

by hicurin

HTML

<div class="thumb">
<ul>
  <li><img src="photos/home9.jpg" /></li>
  <li><img src="photos/home1.jpg" /></li>
  <li><img src="photos/home3.jpg" /></li>
  <li><img src="photos/home4.jpg" /></li>
</ul>
</div>

CSS

.thumb {
    list-style: none;
    width: 300px;
    background: #333;
    margin: 0 auto;
    height: 750px; 
    text-align:center;
}
.thumb ul{
    list-style: none;
    background: red;
    margin: 0 auto;
    height: 750px; 
    width: 200px;
    text-align:center;
    padding: 0;
}

.thumb li {
    text-align: center;
    float: left;
}

.thumb li img {
    height: 20px; 
    width: 20px;
    border: 1px solid #ddd;
    padding: 5px;
    background: #f0f0f0;
}

JavaScript

var totalWidth = 0;
$(function(){
    $('.thumb > ul > li').each(function(){
        totalWidth+= $(this).width();
    });
    $('.thumb > ul').css('width', totalWidth + 'px');
});