JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<ul>
    <li>
        <div class="pecomtrumb"><img alt="" src="http://personalaround.ru/images/joomlart/demo/sam-11.jpg" />
            <div class="pecomtrumbin">
                <span>Алина Хуина</span>
                <span>Уборщица</span>
            </div>
        </div>
    </li>
    
    
    
    <li><img alt="" src="http://personalaround.ru/images/joomlart/demo/sam-22.jpg" /></li>
</ul>

CSS

ul {
    margin:0 0 0 -40px;
    width:100%;
    height:100%;
}
ul li {
    display:block;
    float:left;
    width:350px;
    margin:35px;
    border:1px solid #888;
    word-break: break-all;
    padding:5px;
    position:relative;
}
ul li img{
    width:100%;
    z-index:2;
}
.pecomtrumb{position:relative;font:1em/normal sans-serif;}
.pecomtrumbin{border-top:1px solid #ddd;}
.pecomtrumbin > span{display:block;width:100%;text-align:center;padding:5px 3px;}
.pecomtrumbin span:nth-child(1){}
.pecomtrumbin span:nth-child(2){font-size:0.8em;}


ul li:nth-child(1):before{
    position:absolute;
    bottom:-68px;
    left:-59px;
    z-index:3;
    display:block;
    width:478px;
    height:69px;
    content:"";
    background-repeat:no-repeat;
    background-image:...