JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/css/mdb.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/js/mdb.min.js"></script>
<div id="popular-container">

  <span><h1><strong>Popular Contacts</strong></h1></span>

  <div id="vid-container">
    
    <ul>
      <li>
        <div class="card">

            <div class="view overlay hm-white-slight" id="">
                <img 
                    src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" 
                    class="img-fluid" 
                    alt="image">
                <a href="#">
                    <div class="mask"></div>
                </a>
            </div>

            <!--Card content-->
            <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>

        </div>
      </li>
      
      <li>
        <div class="card">

            <div class="view overlay hm-white-slight" id="">
                <img 
                    src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" 
                    class="img-fluid" 
                    alt="image">
                <a href="#">
                    <div class="mask"></div>
                </a>
            </div>

            <!--Card content-->
            <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>

        </div>
      </li>
      
      <li>
        <div class="card">

            <div class="view overlay hm-white-slight" id="">
                <img 
                   ...

SCSS

#popular-container{
    width: 90%;
    //border: 1px solid black;
    margin: 0 auto;
    top: auto;
    bottom: 0;
    padding: 15px 0;
    position: relative;
    overflow: auto;
    background-color: #f9f9f9;
}

h1{
    //border: 1px solid blue;
    width: 100%;
    margin-bottom: 10px;
}

#vid-container{
    //border: 1px solid black;
    width: 100%;
    margin-left: 0;
}

#vid-container ul{
    list-style: none;
}

#vid-container li{
    //border: 1px solid blue;
    margin: 0 auto;
}

.card{
    width: 30%;
    padding-bottom: 10px;
    //border: 1px solid red;
}

.popular{
    //border: 1px solid black;
    height: 100%;
}

.pop-video-thumbnail{
    height: 60%;
    //border: 1px solid blue;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08), 0 6px 6px rgba(0,0,0,0.08);
}

.pop-desc-thumbnail{
    //border: 1px solid green;
}

h4, p{
    //border: 1px solid black;
    text-align: left;
}