JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<div class="hi">
  hi
</div>

CSS

.hi {
  position: relative;
  top: 10px;
  left: 20px;
  width: 100px;
  height: 10px;
  background-color: white;
  border: 1px solid silver;
  border-radius: 5px;
  background-image: radial-gradient(circle at 30% 50%, red, red 5px, transparent 6px),
    linear-gradient(to right, red, red 30%, transparent 30%),
    radial-gradient(circle at 70% 50%, green, green 5px, transparent 6px),
    linear-gradient(to right, green, green 70%, transparent 70%);
}