JSFiddle - React, Tailwind, and code Playground

by Dawid Karwat

HTML

<svg id="exclamationmark" viewBox="0 0 32 32" width="32" height="32">
  <path
    id="p01"
    d="
      m13 25h6c0.94281 0 2 1.0572 2 2v2c0 0.94281-1.0572 2-2 2
      h-6c-0.94281 0-2-1.0572-2-2v-2c0-0.94281 1.0572-2 2-2zm-2-24
      h10c2 0 3.0098 1.5 2.5 4.75l-2 12.75c-0.31754 2.0243-0.5 2.5-3.5 2.5
      h-4c-2.25 0-3.1863-0.5-3.5-2.5l-2-12.75c-0.5098-3.25 0.5-4.75 2.5-4.75z
    "
    stroke="#000"
    stroke-width="2" />
</svg>

CSS

body {
  background-image: url('https://opengameart.org/sites/default/files/Transparency100.png');
}

#exclamationmark {
  box-shadow: 0 0 0 1px grey;
}

/* Everything from above to visualize the transparency and the borders */

#p01 {
  fill: #f60;
  animation: changeColor 2s alternate infinite;
}

@keyframes changeColor {
  0% { fill: red; }
  45% { fill: red; }
  55% { fill: yellow; }
  100% { fill: yellow; }
}