JSFiddle - React, Tailwind, and code Playground

by Zer00ne Null

HTML

<div id="clients">
    <div class="container">
        <div class="row">
             <h2>Get To Know Us</h2>

            <div id="team">
                <ul>
                    <li>
                        <img src="https://placehold.it/100/3abf30/000.png&text=Randy+Flug" class="img-responsive" alt="" />
                    </li>
                    <li>
                        <img src="https://placehold.it/100/90d/fff.png&text=Alec+Tuckey" class="img-responsive" alt="" />
                        <li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

html { box-sizing: border-box; font: 16px/1.45 Consolas; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; }
#clients {
    background: #333;
}
#clients h2 {
    color: #efefef;
}
#clients h3 {
    margin: 0px 0px 30px;
    font-size: 30px;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
    color: #efefef;
}
#clients ul {
    padding: 0px 0px;
}
#clients ul li {
    margin: 0;
    list-style: none;
    display: table-cell;
}
#clients ul li img {
    opacity: 0.2;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    margin: 5px;
    flex: 1 0 200px;
    align-self: center;
}
#clients ul li:hover img {
    opacity: 1;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -webkit-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}
.row {
    display: table-row;
}
#team {
    text-align: center;
    width: 90vw;
    height: 100%;
    text-decoration-color: #AAA;
    color: #DDD;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-self: center;
    justify-content: center;
    align-items: center;
}