JSFiddle - React, Tailwind, and code Playground

by caprella

HTML

<div class="content">
    <ul class="video-wrapper">
        <li>
            <div class="video"></div>    
            <div class="video-title">Sunday</div>
        </li>
        <li>
            <div class="video"></div>    
            <div class="video-title">Monday</div>
        </li>
        <li>
            <div class="video"></div>    
            <div class="video-title">Tuesday</div>
        </li>
        <li>
            <div class="video"></div>    
            <div class="video-title">Wednesday</div>
        </li>
        <li>
            <div class="video"></div>    
            <div class="video-title">Thursday</div>
        </li>
        <li>
            <div class="video"></div>    
            <div class="video-title">Friday</div>
        </li>
        <li>
            <div class="video"></div>    
            <div class="video-title">Saturday</div>
        </li>
        <li>
            <div class="video"></div>    
            <div class="video-title">Sunday</div>
        </li>
        <li>
            <div class="video"></div>    
            <div class="video-title">Monday</div>
        </li>
        <li>
            <div class="video"></div>    
            <div class="video-title">Tuesday</div>
        </li>
    </ul>
</div>

CSS

.content {
    width: 800px;
    background: #e0e0e0;
}
.video-wrapper {
    list-style-type: none;
    overflow: hidden;
    padding: 0 20px 20px 20px;
    margin: 0;
}
.video-wrapper li {
    float: left;
    position: relative;
    padding: 20px 20px 20px 0;
    width: 25%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.video-wrapper li:nth-child(4n) {
    padding-right: 0;
}
.video-wrapper li:nth-child(4n+1):after {
    content: "";
    width: 760px;    /* fixed width of container without paddings */
    height: 1px;    /* height of border */
    background: #555;    /* color of border */
    position: absolute;
    left: 0;
    bottom: 0;
}
.video-wrapper .video {
    width: 100%;
    height: 100px;
    background: green;
}
.video-wrapper .video-title {
    margin-top: 20px;
}