JSFiddle - React, Tailwind, and code Playground

by mtrantalainen

HTML

<body>
<div class="c1">1</div>
<div class="c2">_2</div>
<div class="c3">3</div>
</body>

CSS

body
{
  position: relative;
  font-family: sans-serif;
}

div
{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 200px;
  width: 200px;
}

.c1
{
  height: 100px;
  border-bottom: solid 2px #f00;
}

.c2
{
  width: 100px;
  border-right: solid 2px #00f;
}

.c3
{
  top: 50px;
  left: 50px;
  height: 100px;
  width: 100px;
  border-radius: 25px;
  backdrop-filter: blur(10px);
  background: rgba(0,0,0, 0.05);
}