JSFiddle - React, Tailwind, and code Playground

HTML

<div class="servercard">
  <a href="https://google.com">
    <img src="https://bellzi.com/cdn/shop/products/Lr-9890-sw.jpg" height=100>
    <p class="text">Test</p>
  </a>
</div>

CSS

.servercard {
    display:flex;
    background-color: #26282c;
    border-style:solid;
    border-width:1px;
    border-radius:8px;
    width: 18%;
    min-width: 125px;
    color:white;
    transition: background-color .125s,box-shadow .125s, transform .125s;
    position:relative;
    margin-top: 21px;
    margin-left: 16px;
}

.servercard a {
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:start;
    height: 183.41px;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.servercard img {
    margin-top:15px;
    margin-bottom: 20px;
}
  
.servercard:hover {
    transform: translateY(-9px);
    cursor:pointer;
    box-shadow: 0 10px 18px rgba(0,0,0,.35);
    background-color: #1e2023;
    transition: background-color .125s,box-shadow .125s, transform .125s;
    transform-origin: center bottom;
}
  
/* these elements stop the card animation from glitching */
.servercard:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    
}
  
.servercard:hover::before {
    height: calc(100% + 1em);
}
  
  
.text {
    word-wrap:break-word;
    max-width:145px;
    margin: 0 auto;
}
  
.servercard img {
    border-radius: 50%;
}