JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<div class="header">
		<div id="id1"></div>
	</div>

CSS

.header{
			width: 100%;
			height: 30px;
			background-color:black;
			position:fixed;
			top: 0px;
			bottom: 0px;
		}
		body
		{
			margin: 0px;
		}

		#id1
		{
			position: relative;
			top: 50px;
			bottom:0px;
			width:100px;
			height: 50px;
			left: 50px;
			background-color:DeepSkyBlue;
			border-radius: 5px;
		}


		#id1::after
		{
			content:"";
			width: 0;
			height: 0;
			position:absolute;
			right:100px;
			bottom:20px;
			padding-left: 30px;
			border-top: 10px solid transparent;
			border-right: 20px solid DeepSkyBlue;
			border-bottom: 10px solid transparent;
		}