JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<div class="hey">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 30" 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>

CSS

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

.svg {
  fill: green;
}

.polygon {
  /* fill: red; */
  /*   
  stroke-width: 3px;
  stroke: blue;
  stroke-linecap: round;
  stroke-linejoin: round;
  */
}