JSFiddle - React, Tailwind, and code Playground

by Damien M

HTML

<div class="element">
			mon element
			<div class="infobulle">
				Mon infobulle
			</div>	
		
		</div>

CSS

body{
	margin : 0;
	padding : 0;
}
.element{
	width : 100px;
	background-color : rgba(0,0,0,0.3);
	margin-top : 20px;
	margin-right :auto;
	margin-left : auto;
}
.infobulle{
	transform : scale(0) rotateX(-180deg);
	position : absolute;
	background-color : #2e3048;
	color : white;
	border-radius : 5px;
	padding : 8px;
	margin-top : 10px;
	box-shadow : 1px 1px 0 0.5px rgba(0,0,0,0.3);
	border-bottom : 3px solid rgba(255,255,255,0.3);
	border-left : 10px solid transparent;
	border-right : 10px solid transparent;
	transition : 1s;
}
.infobulle::before{
	content : '';
	position : absolute;
	border-bottom : 8px solid #2e3048;
	border-left : 8px solid transparent;
	border-right : 8px solid transparent;
	margin-top : -16px;
	margin-left : 10px;
}
.element:hover > .infobulle{
	transform : scale(1) rotateX(0deg);
}