JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<div class="container center">
	<div class="square center">
		<div class="tool-tip top"></div>
		<div class="tool-tip left"></div>
		<div class="tool-tip right"></div>
		<div class="tool-tip bottom"></div>
	</div>
</div>

CSS

.center{
	margin:0 auto
}

.container{
	padding:80px 0;
	max-width:990px;
	border:1px solid #CCC
}

.square{
	height:400px;
	max-width:500px;
	background-color:red;
	position:relative;
	display:block
}

.tool-tip{
	height:60px;
	width:40px;
	background-color:blue;
	position:absolute
}

.tool-tip.top{
	top:-60px
}

.tool-tip.left{
	left:-40px
}

.tool-tip.right{
	right:-40px;
}

.tool-tip.bottom{
	bottom:-60px
}

.tool-tip.top,
.tool-tip.bottom{
	left:50%;
	transform:translateX(-50%)
}

.tool-tip.left,
.tool-tip.right{
	top:50%;
	transform:translateY(-50%)
}