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>
<svg class="cent1" viewBox="0 0 266.51 37.06">
  <path class="cls-1" d="m133.34,16.48c4.27-6.39,9.45-11.15,16.74-14.53h-33.88c7.72,3.27,12.67,8.45,17.15,14.53Z" />
  <path class="cls-2"...

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 {
  fill: #f57e20;
  width: 50px;
}

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

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

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

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

.grandle svg.cent1 {
  left: 50%;
  width: 400px;
  transform: translate(-50%, -50%);
}

.grandle svg.cent1:nth-child(5) {
  top: 7%;
}

.grandle svg.cent1:nth-child(6) {
  bottom: -10%;
  transform: translate(-50%, -50%) rotate(180deg) ;
}

.grandle .cls-1 {
  fill: #421e27;
}

.grandle .cls-2 {
  fill: #f57e20;
}

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

.prof img {
	max-width: 100%;
    max-height: 100%;
    margin-left: 15%;
}

.world_wrp {
    overflow: hidden;
    width: 500px;
    height: 500px;
    position: relative;
}

.world_wrp img {
   max-width: 100%;
   max-height: 100%;
}

@media screen and (max-width: 550px) {
	.grandle...