JSFiddle - React, Tailwind, and code Playground

by RadCor

HTML

<div class="wrapper">
  
  <div class="angle angle-1"></div>
  <div class="angle angle-2"></div>
  <div class="angle angle-3"></div>
  <div class="angle angle-4"></div>
  
</div>

CSS

body {
  background: #1b73eb;
}
.wrapper {
  width: 90%;
  height: 400px;
  position: relative;
  margin: 20px auto 20px auto;
}
.angle {
  width: 50px;
  height: 50px;
  border-width: 0px;
  border-color: #fff;
  border-style: solid;
  position: absolute;
}
.angle-1 {
  border-top-width: 5px;
  border-left-width: 5px;
  top: 0px;
  left: 0px;
}
.angle-2 {
  border-top-width: 5px;
  border-right-width: 5px;
  top: 0px;
  right: 0px;
}
.angle-3 {
  border-bottom-width: 5px;
  border-right-width: 5px;
  bottom: 0px;
  right: 0px;
}
.angle-4 {
  border-bottom-width: 5px;
  border-left-width: 5px;
  bottom: 0px;
  left: 0px;
}