JSFiddle - React, Tailwind, and code Playground
HTML
<section class="sec">
<div class="rost">
<div class="cont"></div>
<div class="lista">
<ul class="ullista"><a href="/*variable popup*/"><li><img src="../imgs/perfiles/1.jpg"><h3 class="h3c">Daniel Bañuelos</h3><p>Desc.</p></li></a><a href="/*variable popup*/"><li><img src="../imgs/perfiles/19.jpg"><h3 class="h3c">Maria</h3><p>Muy buena</p></li></a><a href="/*variable popup*/"><li><img src="../imgs/perfiles/20.jpg"><h3 class="h3c">Roberto</h3><p>Desc</p></li></a><a href="/*variable popup*/"><li><img src="../imgs/perfiles/21.jpg"><h3 class="h3c">Alfonso</h3><p>Desc</p></li></a><a href="/*variable popup*/"><li><img src="../imgs/perfiles/22.jpg"><h3 class="h3c">Rodrigo</h3><p>Desc</p></li></a><a href="/*variable popup*/"><li><img src="../imgs/perfiles/23.jpg"><h3 class="h3c">Raul</h3><p>Desc</p></li></a><a href="/*variable popup*/"><li><img src="../imgs/perfiles/24.jpg"><h3 class="h3c">Saulito</h3><p>Desc</p></li></a><a href="/*variable popup*/"><li><img src="../imgs/perfiles/25.jpg"><h3 class="h3c">Roberto</h3><p>Desc</p></li></a><a href="/*variable popup*/"><li><img src="../imgs/perfiles/26.jpg"><h3 class="h3c">Alfonso</h3><p>Desc</p></li></a><a href="/*variable popup*/"><li><img src="../imgs/perfiles/27.jpg"><h3 class="h3c">Rodrigo</h3><p>Desc</p></li></a><a href="/*variable popup*/"><li><img src="../imgs/perfiles/28.jpg"><h3 class="h3c">Raul</h3><p>Desc</p></li></a><a href="/*variable popup*/"><li><img src="../imgs/perfiles/29.jpg"><h3 class="h3c">Saulito</h3><p>Desc</p></li></a><a href="/*variable popup*/"><li><img src="../imgs/perfiles/30.jpg"><h3 class="h3c">Roberto</h3><p>Desc</p></li></a><a href="/*variable popup*/"><li><img src="../imgs/perfiles/31.jpg"><h3 class="h3c">Alfonso</h3><p>Desc</p></li></a><a href="/*variable popup*/"><li><img src="../imgs/perfiles/32.jpg"><h3 class="h3c">Rodrigo</h3><p>Desc</p></li></a><a href="/*variable popup*/"><li><img src="../imgs/perfiles/33.jpg"><h3 class="h3c">Raul</h3><p>Desc</p></li></a><a...
CSS
.sec{
min-height: 300px;
height: 100%;
background-color: #fff;
padding-left: 40px;
padding-right: 40px;
background-image: url(http://subtlepatterns.com/patterns/swirl_pattern.png);
margin-top: 75px;
margin-bottom: 110px;
}
.rost{
height: 100%;
min-height: 300px;
background-color: #fff;
padding: 0px;
padding-left: 0px;
box-shadow: 0 0 28px rgba(0, 0, 0, .6);
display: flex;
display: -webkit-box;
}.cont{
width: 100%;
height: 300px;
background-color: black;
}
.lista{
margin-top: 0px;
display: block;
/* margin-left: auto;
margin-right: auto;*/
padding: 0px;
margin-bottom: 0px;
background: green;
}
.ullista{
list-style-type: none;
margin:0px;
margin-bottom: 0px;
}
.h3c{
font: bold;
}
.ullista li img {
float: left;
margin: 0 15px 0 0;
width: 100px;
height: 100px;
}
.ullista li p {
word-break: break-all;
word-wrap: break-word;
text-align: justify;
text-justify: inter-word;
line-height: 13pt;
}
.ullista li{
width: 500px;
padding: 10px;
overflow: auto;
float: left;
}
.ullista li:hover {
background: #eee;
cursor: pointer;
}