JSFiddle - React, Tailwind, and code Playground

by social_quotient

HTML

<div class="gawkward-css3-logo">
	<div class="left-eye">
		<div class="glare"></div>
		<div class="pupil"></div>
		<div class="iris"></div>
		<div class="cornea"></div>
		<div class="eyelid"></div>
	</div>
	<div class="right-eye">
		<div class="glare"></div>
		<div class="pupil"></div>
		<div class="iris"></div>
		<div class="cornea"></div>
		<div class="eyelid"></div>
	</div>
	<div class="head"></div>
	<div class="tongue">
		<div class="tongue-dash"></div>
	</div>
</div>

CSS

.gawkward-css3-logo
{
	height: 182px;
	width: 237px;

	position: relative;
}

	.gawkward-css3-logo div
	{
		position: absolute;
	}

	.gawkward-css3-logo > .left-eye
	{}

		.gawkward-css3-logo > .left-eye > .glare
		{
			left: 34px;
			top: 54px;

			height: 23px;
			width: 22px;

			border-radius: 12px 11px;

			background: #FFFFFF;

			z-index: 8;
		}

		.gawkward-css3-logo > .left-eye > .pupil
		{
			left: 21px;
			top: 63px;

			height: 38px;
			width: 38px;

			border-radius: 38px;

			background: #000000;

			z-index: 7;
		}

		.gawkward-css3-logo > .left-eye > .iris
		{
			left: 15px;
			top: 45px;

			height: 61px;
			width: 61px;

			border-radius: 61px;

			background-image: -o-linear-gradient(-125deg, #8ECB91 0%, #016A94 100%);
			background-image: -moz-linear-gradient(-125deg, #8ECB91 0%, #016A94 100%);
			background-image: -webkit-linear-gradient(-125deg, #8ECB91 0%, #016A94 100%);
			background-image: -ms-linear-gradient(-125deg, #8ECB91 0%, #016A94 100%);
			background-image: linear-gradient(-125deg, #8ECB91 0%, #016A94 100%);

			z-index: 6;
		}

		.gawkward-css3-logo > .left-eye > .cornea
		{
			left: 7px;
			top: 13px;

			height: 98px;
			width: 98px;

			border: 1px solid #ABCD9A;
			border-radius: 98px;

			background-image: -o-radial-gradient(80% 88%, #FDFFFD 0%, #CFE7CC 100%);
			background-image: -moz-radial-gradient(80% 88%, #FDFFFD 0%, #CFE7CC 100%);
			background-image: -webkit-radial-gradient(80% 88%, #FDFFFD 0%, #CFE7CC 100%);
			background-image: -ms-radial-gradient(80% 88%, #FDFFFD 0%, #CFE7CC 100%);
			background-image: radial-gradient(80% 88%, #FDFFFD 0%, #CFE7CC 100%);

			box-shadow: inset -5px -2px 0 #FFFFFF;

			z-index: 5;
		}

		.gawkward-css3-logo > .left-eye > .eyelid
		{
			left: 0px;
			top: 11px;

			height: 104px;
			width: 108px;

			border: 1px solid #689356;
			border-radius: 52px 54px;

			background-image: -o-linear-gradient(-117deg, #D1E4A5 0%, #6CBB6F 100%);
			background-image: -moz-linear-gradient(-117deg,...