JSFiddle - React, Tailwind, and code Playground

by BoxMan0617

HTML

<div class="marker unassign"></div>
<br>
<div class="marker assign"></div>
<br>
<div class="marker in-progress"></div>

CSS

body {
  background-color: #ccc;
}

.marker {
  border-radius: 50% 50% 50% 0;
  border: 2px solid #fff;
  width: 20px;
  height: 20px;
  transform: rotate(-45deg);
  box-shadow: -9px 10px 10px -4px rgba(53,64,82,0.5);
}

.unassign {
  background-color: #CBD1E0;
}

.assign {
  background-color: #936DC7;
}

.in-progress {
  background-color: #00CDBE;
}