JSFiddle - React, Tailwind, and code Playground

by Narek Tarverdyan

HTML

<div class="container">
<div class="outside">
  <div class="inside">
    <span class="text"></span>
  </div>
</div>
<div class="outside">
  <div class="inside">
    <span class="text"></span>
  </div>
</div>
<div class="outside">
  <div class="inside">
    <span class="text"></span>
  </div>
</div>
</div>


<!-- 2nd row -->


<div class="container">
  <div class="outside1">
    <div class="inside1">
      <span class="text"></span>
    </div>
  </div>
    <div class="outside1">
    <div class="inside1">
      <span class="text"></span>
    </div>
  </div>
    <div class="outside1">
    <div class="inside1">
      <span class="text"></span>
    </div>
  </div>
</div>

<!-- 3rd row -->

<div class="container">
  <div class="outside2">
    <div class="inside2">
      <span class="text"></span>
    </div>
  </div>
    <div class="outside2">
    <div class="inside2">
      <span class="text"></span>
    </div>
  </div>
    <div class="outside2">
    <div class="inside2">
      <span class="text"></span>
    </div>
  </div>
</div>

SCSS

$color1 : rgba(123,223,12,0.66);
$color2 : rgba(23,43,122,0.66);

body {
  box-sizing: border-box;
  background-color: #222222;
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  //height: 100vh;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 400;
}

.container {
  display:flex;
}

.text:after {
  content: 'Some info about the product and features, the history of the company lorem ipsum and so on.';
}

.outside {
  margin: 10px;
  box-sizing: border-box;
  padding: 10px;
  display:flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: url(https://image.freepik.com/free-vector/wavy-letter-v-logo-in-abstract-style_1017-1976.jpg);
  background-position: center center;
  background-size: cover;
  height: 200px;
  width: 200px;
  -webkit-box-shadow: inset 0px 0px 101px -100px $color1;
  -moz-box-shadow: inset 0px 0px 101px -100px $color1;
  box-shadow: inset 0px 0px 101px -100px $color1;
  transition-duration: 0.5s;
  &:hover {
    -webkit-box-shadow: inset 0px 0px 101px 100px $color1;
    -moz-box-shadow: inset 0px 0px 101px 100px $color1;
    box-shadow: inset 0px 0px 101px 100px $color1;
    .text {
      opacity:1;
      transition-delay: 0.4s;
    }
  }
  .text {
    color: #fff;
    opacity:0;
    transition-duration: 0.5s;
    transition-delay: 0s; 
  }
}

.outside1 {
  margin: 10px;
  box-sizing: border-box;
  padding: 10px;
  display:flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: url(https://image.freepik.com/free-vector/wavy-letter-v-logo-in-abstract-style_1017-1976.jpg);
  background-position: center center;
  background-size: cover;
  height: 200px;
  width: 200px;
  border: solid 0px rgba(0,0,0,0.4);
  transition-duration: 0.5s;
  &:hover {
    -webkit-box-shadow: 0px 0px 201px 56px $color2;
-moz-box-shadow: 0px 0px 201px 56px $color2;
box-shadow: 0px 0px 201px 56px $color2;
    .text {
      opacity:1;
     ...