JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div class="inside">
        <ul>
            <li id="ourapps-1"><a href="#">
				<div class="background" id="app1"></div>
				<div class="slide-up-text"><h2>Quack!</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
				
			</a>
            </li>
            <li id="ourapps-2"><a href="#">
				<div class="background" id="app2"></div>
				<div class="slide-up-text"><h2>Towerr</h2>Elit dolor ut labore tempor adipisicing adipisicing adipisicing magna amet dolore do amet elit aliqua elit. </div>
			</a>
            </li>
            <li id="ourapps-3"><a href="#">
				<div class="background" id="app3"></div>
				<div class="slide-up-text"><h2>Transit</h2>Eiusmod amet dolor dolore lorem consectetur sit et elit tempor magna ut sed magna sed sit adipisicing lorem dolor ut ut. </div>
			</a>
            </li>
        </ul>
    </div>
</div>
</body>

CSS

#main {
    width:100%;
    height:300px;
    padding: 50px 0;
    background:#313334;
}
#main ul {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}
#main li {
    width:297px;
    height:297px;
    display:block;
    margin:0 5px;
    float:left;
    border-radius:999px;
    overflow: hidden;
    border:3px solid #1d90fc;
    background:#1d90fc;
    position: relative;
    z-index: 3;
    -webkit-transition: 0.9s;
}
#main li:hover {
    border:3px solid white;
}
.background {
    position: absolute;
    z-index: 1;
    width:100%;
    height:100%;
    border-radius: 999px;
    overflow: hidden;
}
#main li:hover .background {
    -webkit-transform:rotate(-30deg);
}
#app1 {
    background:#1d90fc url("img/app1.png") no-repeat;
}
#app2 {
    background:#1d90fc url("img/app2.png") no-repeat;
}
#app3 {
    background:#1d90fc url("img/app3.png") no-repeat;
}
.slide-up-text {
    position: absolute;
    z-index: 2;
    bottom:-500px;
    width:80%;
    height:80%;
    padding:10%;
    background:rgba(0, 0, 0, 0.83);
    text-align: center;
    border-radius: 999px;
    -webkit-transition: 1s ease;
}
#main li:hover .slide-up-text {
    position: absolute;
    bottom:-30px;
    margin:0;
    -webkit-transition: 0.5s;
    -webkit-transition-delay: 0.2s;
}