JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
		<div class="melon-outer">
			<div class="melon-inner">
				<div class="melon-seeds">
					
				</div>
			</div>
		</div>
	</div>

CSS

body {
			background-color: #2c3e50;
		}
		.container {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.melon-outer{
			position: relative;
			height:45px;
			width:90px;
			border-radius: 0px 0px 90px 90px;
			-moz-border-radius: 0px 0px 90px 90px;
			-webkit-border-radius: 0px 0px 90px 90px;
			border-left: 6px solid transparent;
			border-right: 6px solid transparent;
			border-bottom: 6px solid transparent;
			animation: watermelon-outer 1s 1s cubic-bezier(.25, .30, .50, 1);
			animation-fill-mode: forwards;
		}
		.melon-inner {
			position: absolute;
			height:80%;
			width:80%;
			left: 50%;
			top: -100%;
			transform: translate(-50%);
			border-radius: 0px 0px 90px 90px;
			-moz-border-radius: 0px 0px 90px 90px;
			-webkit-border-radius: 0px 0px 90px 90px;
			background-color: #c0392b;
			animation: watermelon-inner 1s cubic-bezier(.25, .30, .50, 1);
			animation-fill-mode: forwards;
		}
		.melon-seeds {
			position: absolute;
			width: 80%;
			height: 80%;
			border-radius: 0px 0px 90px 90px;
			-moz-border-radius: 0px 0px 90px 90px;
			-webkit-border-radius: 0px 0px 90px 90px;
			left: 50%;
			transform: translate(-50%);
			border-left: 3px dotted transparent;
			animation: watermelon-seeds 1s 2s cubic-bezier(.25, .30, .50, 1);
			animation-fill-mode: forwards;
		}
		@keyframes watermelon-outer {
			to {
				border-left: 6px solid #2ecc71;
				border-right: 6px solid #2ecc71;
				border-bottom: 6px solid #2ecc71;
			}
		}
		@keyframes watermelon-inner {
			to {
				top: 0;
			}
		}
		@keyframes watermelon-seeds {
			to {
				border-left: 3px dotted black;
			}
		}