JSFiddle - React, Tailwind, and code Playground

HTML

<div class="canvas">
		

		<div class="crest">
			<div class="shape1"></div>
			<div class="shape2"></div>
			<div class="shape3"></div>
			<div class="shape4"></div>
			<div class="shape5"></div>
			<div class="shape6"></div>
		</div>

		<div class="fire">
			<div class="fire-r">
				<div class="corn-tl"></div>
				<div class="corn-tr"></div>
				<div class="corn-bl"></div>
				<div class="corn-br"></div>
			</div>

			<div class="fire-l">
				<div class="l1"></div>
				<div class="l2"></div>
			</div>

			<div class="inner-fire"></div>
		</div>

		<div class="fire-shad">
			<div class="fire-r-shad">
				<div class="corn-tl-shad"></div>
				<div class="corn-tr-shad"></div>
				<div class="corn-bl-shad"></div>
				<div class="corn-br-shad"></div>
			</div>

			<div class="fire-l-shad">
				<div class="l1-shad"></div>
				<div class="l2-shad"></div>
			</div>

			<div class="inner-fire-shad"></div>
		</div>
		<div class="fire-mask-shad"></div>

		<div class="eyes">
			<div class="left"></div>
			<div class="right"></div>
		</div>

		<div class="mouth">
			<div class="top"></div>
			<div class="down"></div>

			<div class="teeth">
				<div class="top-teeth"></div>
				<div class="bottom-teeth"></div>
			</div>

			<div class="hole"></div>
		</div>

		<div class="body-shape">
			<div class="common"></div>
			
			<div class="leg-l"></div>
			<div class="leg-r-out">
				<div class="leg-shad"></div>
			</div>
			<div class="foot-r"></div>
		</div>

		<div class="tail"></div>
		<div class="tail-mask"></div>
		<div class="tail-mask2"></div>
		<div class="tail-mask-body"></div>

		<div class="wing">
			<div class="wing1"></div>
			<div class="wing2"></div>
			<div class="wing3"></div>
			<div class="wing4"></div>	
			<div class="wing5"></div>
		</div>
	</div>

CSS

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}.canvas{position:relative;width:400px;height:400px;margin:20px auto;overflow:hidden;border-radius:50% 50%;background:#526d8b}div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fire-proto,.corn-tl,.corn-bl,.corn-br,.corn-tr,.fire-l,.fire-l .l1,.fire-l .l2,.fire-l:after,.fire-l .l2:after,.fire-l .l2:before,.corn-tl-shad,.corn-bl-shad,.corn-br-shad,.corn-tr-shad,.fire-l-shad,.fire-l-shad .l1-shad,.fire-l-shad .l2-shad,.fire-l-shad .l2-shad:after,.fire-l-shad .l2-shad:before{position:absolute}.fire{position:relative;top:160px;left:70px;width:110px;height:40px;z-index:9999}.fire-r{position:absolute;top:1px;right:9px;width:12px;height:16px;background:#ff0;-webkit-border-radius:15% 80% 0 0/0 50% 40% 40%;-moz-border-radius:15% 80% 0 0/0 50% 40% 40%;-ms-border-radius:15% 80% 0 0/0 50% 40% 40%;-o-border-radius:15% 80% 0 0/0 50% 40% 40%;border-radius:15% 80% 0 0/0 50% 40% 40%;z-index:999}.corn-tl{top:-1.5px;left:-10px;width:11px;height:2px;border-top:1px solid transparent;border-bottom:1px solid transparent;border-right:11px solid...