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 .info {}

.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)...