JSFiddle - React, Tailwind, and code Playground

by gerdonabbink

HTML

<svg viewbox="0 0 30 12">
  <path d="M0-0 H30 V12 H-10z M 5 5 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0z"/>
</svg>

CSS

svg {
  display: block;
  width: 100%;
  height: 100%;
}

path {
  transition: fill 0.5s;
  fill: #E3DFD2;
}

path:hover {
  fill: pink;
}

html,
body {
  height: 100%;
  width: 100%;
}