JSFiddle - React, Tailwind, and code Playground

by Madalina Taina

HTML

<div class="wrap">
    <div class="diamond-top">
      <div class="diamond-container">
        <a href="#" class="yellow tile-link">Link 1</a>
      </div>
    </div>

    <div class="diamond-left">
      <div class="diamond-container">
        <a href="#" class="yellow tile-link">Link 2</a>
      </div>
    </div>

    <div class="diamond-bottom">
      <div class="diamond-container">
        <a href="#" class="yellow tile-link">Link 3</a>
      </div>
    </div>

    <div class="diamond-right">
      <div class="diamond-container">
        <a href="#" class="yellow tile-link">Link 4</a>
      </div>
    </div>
</div>

CSS

.wrap{
  position:relative;
  width:300px;
  height:300px;
}
.diamond-top {
  position: absolute;
  top: 25%;
  left: 39%;
}
.diamond-left {
    position: absolute;
    left: 13px;
    top: 60%;
}
.diamond-right {
    position: absolute;
    left: 75%;
    top: 60%;
}
.diamond-bottom {
    position: absolute;
    top: 95%;
    left: 39%;
}
.diamond-container {
  width: 212px;
  height: 212px;
  padding: 30px;
}
.diamond-container:hover .tile-link {
  -webkit-animation: rotateYaxis 5s linear infinite;
}
.tile-link {
  font-size: 20px;
  text-transform: uppercase;
  text-align: center;
  width: 150px;
  height: 150px;
  display: block;
  position: relative;
  line-height: 150px;
  -webkit-transition: 1s ease-in-out;
  -moz-transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  transform-origin: center;
}
.tile-link:hover {
  color: #000;
  text-decoration: none;
}
.tile-link:hover:before {
  background: yellow;
}
.tile-link:before {
  content: '';
  display: block;
  width: 150px;
  height: 150px;
  background: white;
  box-shadow: inset 0 0 0 5px yellow;
  transform: rotate(-45deg);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: 1s ease-in-out;
}
@-webkit-keyframes rotateYaxis {
  0% {
    -webkit-transform: rotate3d(0, 1, 0, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 720deg);
  }
}