JSFiddle - React, Tailwind, and code Playground

HTML

<figure>
	<div class="shadow"></div>
	<div class="tentacles">
		<div class="tentacle tentacle1"></div>
		<div class="tentacle tentacle2"></div>
		<div class="tentacle tentacle3"></div>
		<div class="tentacle tentacle4"></div>
		<div class="tentacle tentacle5"></div>
		<div class="tentacle tentacle6"></div>
	</div>
	<div class="body">
		<div class="eye-left"></div>
		<div class="eye-right"></div>
		<div class="mouth">
			<div class="teeth-top tooth1"></div>
			<div class="teeth-top tooth2"></div>
			<div class="teeth-top tooth3"></div>
			<div class="teeth-top tooth4"></div>
			<div class="teeth-bottom tooth5"></div>
			<div class="teeth-bottom tooth6"></div>
			<div class="teeth-bottom tooth7"></div>
			<div class="teeth-bottom tooth8"></div>
			<div class="tongue"></div>
		</div>
	</div>
</figure>

CSS

body {
	background: #fff;
}
figure {
	display: block;
	position: relative;
	width: 400px;
	height: 500px;
	margin: 50px auto 0;
}
figure div {
	position: absolute;
}
.body {
	width: 200px;
	height: 380px;
	border-radius: 100px 100px 0 0;
	background: #a659a1;
	left: 50px;
	top: 2px; 
}
.eye-left, .eye-right {
	border-radius: 50%;
	background: #fff;
}
.eye-left {
	width: 50px;
	height: 50px;
	background: radial-gradient(circle at 12px 20px, #000 6px, #000 13px, #fff 14px);
	left: 43px;
	top: 85px;
}
.eye-right {
	width: 33px;
	height: 33px;
	background: radial-gradient(circle at 7px 12px, #000 7px, #000 8px, #fff 9px);
	left: 117px;
	top: 95px;
}
.eye-left::after, .eye-right::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	background: #fff;
}
.eye-left::after {
	width: 10px; height: 10px;
	left: 1px;
	top: 12px;
}
.eye-right::after {
	width: 6px; height: 6px;
	left: 1px;
	top: 7px;
}
.mouth {
	width: 70px;
	height: 160px;
	background: #000;
	border: 8px solid #d497d4;
	border-radius: 50px;
	left: 58px;
	top: 160px;
	overflow: hidden;
}
.teeth-top, .teeth-bottom {
	width: 14px;
	height: 35px;
	border-radius: 7px;
	background: #fff;
	border: 2px solid #000;
}
.teeth-top { top: -5px; }
.teeth-bottom {	bottom: -5px; }
.tooth1, .tooth5 { left: 1px; }
.tooth2, .tooth6 { left: 17px; }
.tooth3, .tooth7 { left: 34px; }
.tooth4, .tooth8 { left: 50px; }
.tongue {
	width: 20px;
	height: 40px;
	background: #ec1854;
	border-radius: 10px 10px 10px 10px / 10px 10px 30px 30px;
	left: 24px; top: 110px;
}
.tongue::after {
	content: '';
	position: absolute;
	background: #000;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	left: 0px; top: -12px;
}
.tentacle {
	border-radius: 400% 40% 40% 40% / 60% 40% 40% 60%;
	background: #a659a1;
}
.tentacle1 {
	width: 124px;
	height: 37px;
	left: -14px;
	top: 319px;
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
}
.tentacle2 {
	width: 120px;
	height: 30px;
	left: -41px;
	top: 371px;
	-webkit-transform:...