JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="hey">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 28 32" class="svg">
    <polygon class="polygon" points="26 22.5 26 7.5 13 0 0 7.5 0 22.5 13 30 26 22.5"></polygon>
    <text class="text" dominant-baseline="middle" text-anchor="middle" x="50%" y="54%" fill="white">F</text>
  </svg>
</div>

<div class="hey">
  <div>make it like this tho</div>
  <img src="https://marcel.imarc.host/outline-hexagon.png" alt="">
</div>

<!-- <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-hexagon" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <path d="M19 6.873a2 2 0 0 1 1 1.747v6.536a2 2 0 0 1 -1.029 1.748l-6 3.833a2 2 0 0 1 -1.942 0l-6 -3.833a2 2 0 0 1 -1.029 -1.747v-6.537a2 2 0 0 1 1.029 -1.748l6 -3.572a2.056 2.056 0 0 1 2 0l6 3.573z" />
</svg> -->

CSS

.hey {
  margin-bottom: 4rem;
	width: 200px;
}

.svg  {
  fill: none;
}

.text {
  fill: purple;
}

.polygon {
  stroke-width: 1px;
  stroke: purple;
}