JSFiddle - React, Tailwind, and code Playground

HTML

<div class="website">
  <div>Blog 1</div>
</div>
<div class="website">
  <div>Blog 2</div>
</div>
<div class="website">
  <div>Blog 3</div>
</div>

CSS

body {
  font-family: 'Segoe UI', sans-serif;
}

.website {
  width: 180px;
  height: 73px;
  text-align: center;
  line-height: 80px;
  margin: 1px;
  color: white;
  border-bottom: 5px solid darkslateblue;
  background-color: darkslateblue;
  white-space: nowrap;
  overflow: hidden;
  transition: border-color 0.66s ease-out;
}

.website:hover {
  cursor: pointer;
  transition: border-color 0.4s;
  border-color: black;
}

.website div {
  transform: scale(1);
  transition: transform 0.3s ease-out;
}

.website:hover div {
  transform: scale(1.5);
  transition: transform 0s;
}