JSFiddle - React, Tailwind, and code Playground

by Murat Kezli

HTML

<div id="container">

  <div class="flip_box">
    <div class="flip_box_inner">
      <div class="flip_box_front">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
      </div>
      <div class="flip_box_back">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
      </div>
    </div>
  </div>

  <div class="flip_box">
    <div class="flip_box_inner">
      <div class="flip_box_front">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
      </div>
      <div class="flip_box_back">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
      </div>
    </div>
  </div>

  <div class="flip_box">
    <div class="flip_box_inner">
      <div class="flip_box_front">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
      </div>
      <div class="flip_box_back">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
      </div>
    </div>
  </div>

  <div class="flip_box">
    <div class="flip_box_inner">
      <div class="flip_box_front">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
      </div>
      <div class="flip_box_back">
        <img...

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
}

img {
  width: 100%;
  display: block;
}

#container {
  display: flex;
  flex-wrap: wrap;
}

.flip_box {
  background-color: transparent;
  width: 50%;
  height: 220px;
  perspective: 1000px;
}

.flip_box_inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip_box:hover .flip_box_inner {
  transform: rotateY(180deg);
}

.flip_box_front,
.flip_box_back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip_box_front {
  background-color: #bbb;
  color: black;
}

.flip_box_back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

.flip_box_back img{width:auto; height:100% !important;}