JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='box'>
  <div class='content'>
    Stuffs
  </div>
  <div class='shadow'>
  
  </div>
</div>

CSS

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  position: relative;
  transition: all 0.15s ease;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  border: 1px solid white;
}

.box:hover .content {
  border: 2px solid white;
  top: -1px;
  left: -1px;
  transition: all 0.15s ease;
}
.box:hover .shadow {
  border: 2px solid transparent;
  opacity: 0.4;
  top: -1px;
  left: -1px;
  box-shadow: 0 1px 6px 0 black;
  transition: all 0.15s ease;
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px 0 black;
  opacity: 0.5;
  transition: all 0.15s ease;
}