JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<div class="team">
    <ul>
        <li><a href="#" class="button-2 larrow"> ❮ </a></li>
        <li class="person" id="caty">
            <img class="portrait" src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/256/football.png">
            <p> Caty Miles </p>
        </li>
        <li class="person" id="april">
            <img class="portrait" src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/256/football.png">
            <p> April Ludgate </p>
        </li> 
        <li><a href="#" class="button-2 rarrow"> ❯ </a></li>
    </ul>
</div>

CSS

a.button-2 {
    width: 3%;
    content: '';
    position: absolute;
    top: 10%;
    color: #ffffff;
    font-size: 10vw;
    padding: 1vw;
    background: #990033;
    padding-right: 3.5vw;
    margin-top: 10vw;
    margin-bottom: 10vw;
   
}

.larrow {
   left: 0%;
}

.rarrow {
   right: 0%;
}

li {
   display: inline-block;
   text-decoration: none;
   text-align: center;
}

.team {
   position: relative;
   margin-top: 25%;
     
}

.portrait {
   height: auto;
}

.person {
   width: 35%;
   font-size: 1.1em;
   height: auto;
}

#caty {
   margin-left: -10%;
   text-align: center;
}

#april {
   margin-left: 22%;
   text-align: center;
}