JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<div class="block">
    <div class="item">
        <div class="vizibil">Site de prezentare</div>
        <div class="ascuns">Descrierea etc rahat Descrierea etc 
            rahat Descrierea etc rahat Descrierea etc rahat.
        </div>
    </div>
    
    <div class="item">
        <div class="vizibil">Site de prezentare</div>
        <div class="ascuns">Descrierea etc rahat Descrierea etc 
            rahat Descrierea etc rahat Descrierea etc rahat.
        </div>
    </div>
</div>

CSS

.item {
    border: 2px solid red;
}
.vizibil {
    display: block;
}

.vizibil:hover + .ascuns {
    height: auto;
    opacity: 1;
    transform: translateY(0);
}

.ascuns {
    position: relative;
    opacity: 0;
    display: block;
    width: 100px;
    height: 0;
    transform: translateY(-100%);
    pointer-events: none;
    transition: all .2s ease-in-out;
}