JSFiddle - React, Tailwind, and code Playground

HTML

<body class="height-100vh">

    <ul class="flex-column flex-full">
        <li class="flex-cell"><a href="#" class="full-anchor">hello</a></li>
        <li class="flex-cell"><a href="#" class="full-anchor">hello</a></li>
        <li class="flex-cell"><a href="#" class="full-anchor">hello</a></li>
    </ul>

</body>

CSS

.height-100vh  {
     height: 100vh;
}

ul.flex-column  {
     padding: 0;
     margin: 0;
}

ul.flex-column li  {
     list-style: none;
}

.flex-column  {
     display: flex;
     flex-flow: column wrap;
}

.flex-cell  {
     display: flex;
     flex: 1;
     border: solid 1px blue;
     border-radius: 15px;
     padding: 10px;
}

.flex-full  {
     width: 100%;
     height: 100%;
}

.full-anchor {
    flex:1;
    background: rgba(0,0,0,0.25);
    color: #FFF;
}