JSFiddle - React, Tailwind, and code Playground

by Luca Detomi

HTML

<div class="double-border left">
   inset "box-shadow" and "outline"
</div>

<div class="double-border right">
   double "box-shadow"
</div>

CSS

body 
{
  background: linear-gradient(180deg, #ccc 50%, #fff 50%) no-repeat;
}

.double-border 
{
  background-color: #ccc;
  border: 4px solid #ccc;
  padding: 2em;
  width: 16em;
  height: 16em;
  float:left;
  margin-right:20px;
  text-align:center;
}

.left
{
  outline: 4px solid #fff;
  box-shadow:inset 0 0 0 4px #fff;
}

.right
{
  box-shadow:0 0 0 4px #fff, inset 0 0 0 4px #fff;
}