JSFiddle - React, Tailwind, and code Playground

by nilloc

HAML

.holder
  .box1 width:  50%
  .box2 height:  50%

SCSS

.holder{
  position: relative;
  /* height:500px; */
  /* width: 500px; */
  /* border:1px solid black; */
  filter: drop-shadow(0px 0px 1px #4A90E2) drop-shadow(0px 0px 1px #4A90E2) drop-shadow(0px 0px 1px #4A90E2) drop-shadow(0px 0px 1px #4A90E2) drop-shadow(0px 0px 1px #4A90E2) drop-shadow(0px 0px 1px #4A90E2) drop-shadow(0px 0px 1px #4A90E2) drop-shadow(0px 0px 1px #4A90E2) drop-shadow(0px 0px 1px #4A90E2) drop-shadow(0px 0px 1px #4A90E2) drop-shadow(0px 0px 1px #4A90E2) drop-shadow(0px 0px 1px #4A90E2) drop-shadow(0px 0px 1px #4A90E2);
}

.box1, .box2{
  position:absolute;
  background:#4A90E2;
  border-radius:1px;
  height:18px;
  display:inline-block;
  padding-left:6px;
  padding-right:6px;
  color:white;
  font-weight:bold;
  font-family:helvetica;
}

.box1{
  top:20px;
  left:100px;
}

.box2{
  top:40px;
  left:140px;
}