JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block"></div>

CSS

.block {
  margin: 3rem auto 0;
  height: 10rem;
  width: 10rem;
  position: relative;
  background: #000;
}

.block::before {
  height: 2rem;
  width: 2rem;
  position: absolute;
  top: 0;
  left: 50%;
  content: '';
  background: red;
  border: 0.5rem solid #fff;
  border-radius: 50%;
  transform: translateY(-50%) translateX(-50%);
}