JSFiddle - React, Tailwind, and code Playground

HTML

<div class="catBlock">
  <span class="v"></span>
  <ul>
    <li><a href="#">IP Phone</a></li>
    <li><a href="#">Dual SIM Switch Server</a></li>
    <li><a href="#">IP PBX</a></li>
  </ul>
</div>

CSS

* { margin: 0; padding: 0; }
.catBlock {
    text-align: center;   
    width: 550px; 
    height: 270px; 
    margin: 5px;
    border: 1px solid #ccc; }
.catBlock .v, .catBlock ul, .catBlock ul li {
    vertical-align: middle;
    display: inline-block; }
.catBlock .v { height: 100%; }
.catBlock ul { list-style: none; }
.catBlock ul li {
    background-color: red;
    width: 160px; 
    height: 100px; }
.catBlock ul li a { 
    height: 60px; /* 95 - 30 - 5 */
    padding: 30px 10px 5px 10px;
    display: block; }