JSFiddle - React, Tailwind, and code Playground

by beneverard

HTML

<svg class="shield" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 140">
  <g fill="none" fill-rule="evenodd" stroke="#000">
    <path stroke-linecap="square" stroke-width="4.5" d="M5 23l90 71"/>
    <path stroke-linecap="square" stroke-width="4.5" d="M5 94l90-71"/>
    <path stroke-linecap="square" stroke-width="4.5" d="M95 88L54 8"/>
    <path stroke-linecap="square" stroke-width="4.5" d="M5 88L46 8"/>
    <path stroke-linecap="square" stroke-width="4.5" d="M50 6.68V136.5"/>
    <path stroke-width="5.5" d="M50 3.8a58.08 58.08 0 0 1-8.06 6.7C32.1 17.3 19.53 21.37 2.75 21.77V98.1c0 8.47 8.83 17.83 23.69 26.95 5.37 3.3 11.14 6.32 16.9 9A172.88 172.88 0 0 0 50 137l1.08-.45a168.02 168.02 0 0 0 22.48-11.49c14.86-9.1 23.69-18.47 23.69-26.94V21.76c-16.78-.4-29.35-4.46-39.2-11.25a58.08 58.08 0 0 1-5.97-4.75A81.65 81.65 0 0 1 50 3.8z"/>
  </g>
</svg>

CSS

.shield {
	font-size: 150px;
	height: 1em;
	width: 0.714em;
}