JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<div class="col-sm-6">
  <!-- colored -->
  <div class="ih-item square colored effect4">
    <a href="#">
      <div class="img"><img src="images/assets/rect/2.jpg" alt="img"></div>
      <div class="mask1"></div>
      <div class="mask2"></div>
      <div class="info">
        <h3>Heading here</h3>
        <p>Description goes here</p>
      </div>
    </a>
  </div>
  <!-- end colored -->
</div>

CSS

.square.ih-item {
  border-top: #fff 8px solid;
  height: 216px;
  border-right: #fff 8px solid;
  width: 216px;
  border-bottom: #fff 8px solid;
  position: relative;
  border-left: #fff 8px solid;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.square.ih-item .info {
  right: 0px;
  position: absolute;
  text-align: center;
  left: 0px;
  top: 0px;
  bottom: 0px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.effect4.square.ih-item {
  overflow: hidden;
  position: relative;
}

.colored.effect4.square.ih-item .mask1 {
  background: #1a4a72;
}

.colored.effect4.square.ih-item .mask2 {
  background: #1a4a72;
}

.effect4.square.ih-item .img {
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

.effect4.square.ih-item .mask1 {
  height: 361px;
  width: 361px;
  background: #333333;
  position: absolute;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

.effect4.square.ih-item .mask2 {
  height: 361px;
  width: 361px;
  background: #333333;
  position: absolute;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

.effect4.square.ih-item .mask1 {
  right: 0px;
  left: auto;
  top: 0px;
  -webkit-transform: rotate(56.5deg) translatex(-180px);
  -moz-transform: rotate(56.5deg) translatex(-180px);
  -ms-transform: rotate(56.5deg) translatex(-180px);
  -o-transform: rotate(56.5deg) translatex(-180px);
  transform: rotate(56.5deg) translatex(-180px);
  -webkit-transform-origin: 100% 0%;
  -moz-transform-origin: 100% 0%;
  -ms-transform-origin: 100% 0%;
  -o-transform-origin: 100% 0%;
  transform-origin: 100% 0%;
}

.effect4.square.ih-item .mask2 {
  left: 0px;
  top: auto;
  bottom: 0px;
  -webkit-transform: rotate(56.5deg) translatex(180px);
  -moz-transform: rotate(56.5deg) translatex(180px);
  -ms-transform:...