JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-lg-12 grandle">
    <svg class="corn1" viewBox="0 0 27.62 27.61">
  <path d="m26.89.02c-2.4,0-4.79,0-7.19,0C13.33,0,6.95.01.58,0,.12,0,0,.15,0,.58c.02,1.21,0,2.42,0,3.63,0,7.54,0,15.09,0,22.63,0,.74.11.84.83.71.79-.14,1.6-.23,2.37-.45H.7V1.08h26.51v1.86c.18-.71.27-1.45.38-2.18.1-.72.06-.74-.69-.74Z" />
  <path class="cls-1" d="m10.18,2.12c.08-.11.12-.25.18-.38-.14-.06-.28-.13-.42-.17-.08-.03-.18-.02-.26-.02-2.45,0-4.9,0-7.35,0-.63,0-.69.06-.7.68,0,1.26,0,2.51,0,3.77h-.02c0,1.3,0,2.6,0,3.9,0,.15.09.29.14.44.14-.06.31-.09.42-.19,1.08-.99,2.39-1.33,3.79-1.28,1.71.06,3.21.7,4.44,1.91,1.14,1.12,1.73,2.48,1.71,4.09,0,.59.1.69.66.53,1.43-.4,2.31-1.35,2.71-2.76.13-.48.03-.6-.5-.57-1.35.07-2.53-.37-3.57-1.19-1.43-1.12-2.19-2.61-2.44-4.4-.23-1.64.22-3.07,1.23-4.36Zm-3.36,5.56c-1.13-.03-2.26-.08-3.39-.12-.41-.02-.51-.14-.33-.49.5-.98.52-2.02.44-3.07-.03-.45.05-.55.49-.49,1.11.14,2.17.05,3.17-.53.26-.15.43-.03.43.28,0,.65.06,1.3.06,1.95,0,0,0,0,0,0,0,.51.01,1.09.02,1.59.01.7-.17.89-.88.88Z" />
  <path class="cls-1" d="m1.59,22.78c0,.78-.01,1.57-.01,2.35,0,.48.12.62.57.53.53-.11,1.05-.26,1.55-.47.28-.12.59-.33.75-.58.7-1.09.14-2.6-.65-3.24-.65-.53-1.31-1.04-2.06-1.64-.05.21-.14.41-.15.62-.01.81,0,1.63,0,2.44Z" />
  <path class="cls-1" d="m25.13,1.56c-.8,0-1.59,0-2.39,0h0c-.86.01-1.71,0-2.57.02-.12,0-.23.09-.35.14.05.11.07.24.15.33.4.51.84.99,1.22,1.51.5.69,1.2,1.05,2.01,1.16.64.09,1.26-.04,1.73-.56.51-.57.63-1.29.75-1.99.08-.49-.04-.6-.55-.61Z" />
  <path...

CSS

svg {
  position: absolute;
  z-index: 3;
  pointer-events:none; 
}

.grandle {
  position: relative;
  height: 300px;
  min-height: 300px;
  max-height: 300px;
  margin: 10px;
  color: #fff;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,474340+100 */
  background: #000000;
  /* Old browsers */
  background: -moz-linear-gradient(top, #000000 0%, #474340 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #000000 0%, #474340 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #000000 0%, #474340 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#474340', GradientType=0);
  /* IE6-9 */
  border: solid 3px #421e27;
}

.grandle svg.corn1 {
  width: 50px;
  stroke: pink;
  stroke-width: 1px;
  stroke-linejoin: round;
  paint-order: stroke;
}

.grandle svg.corn1:nth-child(1) {
  left: -.5%;
  top: -1%;
}

.grandle svg.corn1:nth-child(2) {
  right: -.5%;
  top: -1%;
  transform: rotate(90deg);
}

.grandle svg.corn1:nth-child(3) {
  left: -.5%;
  bottom: -1%;
  transform: rotate(-90deg);
}

.grandle svg.corn1:nth-child(4) {
  right: -.5%;
  bottom: -1%;
  transform: rotate(180deg);
}

.grandle svg.topp1 {
  /* fill: pink; */
  top: 8%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
}

.grandle .cls-1 {
  fill: red;
}

.grandle .cls-2 {
  fill: purple;
}

.prof {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 22px 10px 22px 0;
  background: yellow;
  border: solid 3px #fff;
}