JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<div class="ear">
  <div class="inner">
    <div class="intra"></div>
    <div class="inter"></div>
  </div>
</div>

<div class="tendril">

</div>

CSS

body {
      background-color: #;
    background-image: linear-gradient(150deg, transparent 75%, #e90173 78%), linear-gradient(152deg, transparent 88%, #0b080e 91%);
    box-shadow: inset 7px 33px 20px -4px #c10254, inset -5px -1px 12px -1px rgba(239, 2, 112, 0.55), inset -70px -2px 63px 2px rgba(6, 8, 14, 0.84), inset 6px -10px 11px -6px #c00059, inset 20px 2px 20px -3px #0c151e;
}
body .paper .container {
    position: relative;
    margin: auto;
    width: 100%;
    height: 800px;
    background-color: #36021e;
    background-image: linear-gradient(to right, #3c0226, #230105);
}
div, div:after, div:before {
    position: absolute;
    print-color-adjust: exact;
    filter: opacity(1);
    box-sizing: border-box;
}

.ear {
    border-radius: 40% 60% 80% 20% / 30% 50% 50% 9%;
    background-image: radial-gradient(ellipse at 15% 62%, #13222c, #0d171e 9%, #030b0f 24%, #0a141a, #130810 60%, #47143c);
    width: 9%;
    height: 16%;
    left: 50%;
    top: 44%;
    transform: rotate(10deg);
    box-shadow: 9px 4px 7px 0px rgba(8, 0, 9, 0.36);
}
.ear .inner {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    box-shadow: inset -3px 1px 10px -4px #79063e, inset -2px -5px 4px -2px #060b10, inset -3px -10px 4px -2px #07151b, inset -2px -14px 4px -2px #120a16, inset -2px -19px 3px -2px #0b1a23, inset -1px 5px 2px 3px #0a1922, inset -7px 11px 7px 0px #060c10;
}

.tendril {
    width: 5%;
    height: 100%;
    filter: blur(1px);
    transform-origin: 50% 0;
}

.tendril1 {
    left: 34%;
    height: 42%;
    top: 8%;
    width: 4%;
    opacity: 0.6;
    transform: rotate(-7deg) scaleX(-1);
}

.tendril:before {
    background-image: radial-gradient(ellipse farthest-corner at -28% 50%, transparent 49%, rgba(8, 14, 20, 0.91) 55%, rgba(15, 10, 10, 0.56), rgba(21, 1, 7, 0.76) 76%, transparent 85%, transparent);
    background-size: 100% 8%;
    background-position: 0 22%;
        content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top:...