JSFiddle - React, Tailwind, and code Playground

by thegrachev

HTML

<div class="price_tabel_bg">
<div class="table_bg_1" ><span class="text_price_1"><a class="">АУДИТ САЙТА</a></span></div>
</div>

<div class="price_tabel_text_1">
<p class="">ВЕДЕНИЕ КАМПАНИИ - синхронизирует межличностный поведенческий таргетинг. По сути, маркетингово-ориентированное издание отталкивает фирменный стиль, признавая определенные рыночные тенденции. Охват аудитории восстанавливает продукт. Особенность рекламы инновационна. К тому же размещение конструктивно. Баинг и селлинг без оглядки на авторитеты позитивно усиливает анализ рыночных цен, полагаясь на инсайдерскую информацию.</p>
</div>

CSS

.table_bg_1 {
	margin: 3px 0 0 0;
	width: 205px;
	height: 54px;
	text-align: left;
	background-color: rgba(253, 203, 77, 0.5);
}
.table_bg_1:hover {
	margin: 3px 0 0 0;
	width: 205px;
	height: 54px;
	text-align: left;
	opacity: 1;
	background: #fdcb4d;
}
.price_tabel_text_1 {
	position: absolute;
	font-size: 14px;
	text-align: justify;
	color: #000;
    display: none;
}
.table_bg_1:hover ~ .price_tabel_text_1 {
		display: block;
}