JSFiddle - React, Tailwind, and code Playground

by SerGen

HTML

<div class="Content">
	<div class="Box">КЕК</div>
</div>

CSS

html,
body,
.Content {
	margin: 0;
	width: 100%;
	height: 100%;
}

.Content {
	text-align: center;
	
	backface-visibility: visible;
	perspective-origin: 50% 50%;
	transform-style: preserve-3d;
	perspective: 500px;
}
.Content:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}

.Box {
	border: 1px solid magenta;
	background-color: #fff;
	display: inline-block;
	width: 150px;
	padding: .5em 0;
	font-weight: bold;
	font-family: Impact;
	font-size: 3em;
	position: relative;
	opacity: 0;
	transform: rotateX(90deg);
	transform-origin: 0 calc(100% + 10px);
	transition: .2s;
}
.Box:before,
.Box:after {
	content: '';
	border: 10px solid transparent;
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -10px;
	border-top-color: magenta;
}
.Box:after {
	border-top-color: white;
	margin-top: -1px;
}

.Content:hover .Box {
	opacity: 1;
	transform: rotateX(0deg);
}

JavaScript

/*
Небольшой встающий плакатик
Для появления — навести на содержимое
*/