JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="expo">
        <div class="expo-pic"><img/></div>
        <div class="expo-desc">
            <p>Title</p>
        </div>
    </li>
    <li class="expo">
        <div class="expo-pic"><img/></div>
        <div class="expo-desc">
            <p>Title</p>
        </div>
    </li>
    <li class="expo">
        <div class="expo-pic"><img/></div>
        <div class="expo-desc">
            <p>Title</p>
        </div>
    </li>
</ul>

CSS

ul{
    text-align:center;
    margin:0;
}
ul li{
    display:inline-block;
    list-style:none;
    margin:0;
    padding:0;
    height:140px;
    vertical-align:top;
}
img{
    background:#aaa;
    border:1px solid #999;
    width:100px;
    height:100px;;
}


.expo-pic{
    margin-top: 17px;
}
.expo-desc{
    display:none;
    margin:0;
}

ul .expo:nth-child(2) .expo-pic{
    margin-top:0;
}
ul .expo:nth-child(2) .expo-pic img{
    
    width:140px;
    height:140px;
}
ul .expo:nth-child(2) .expo-desc{
    display:block;    
}