JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<div class="block">
    <span class="top"></span>
    <div class="text">Пример текста</div>
    <span class="bottom"></span>
</div>

CSS

.block {
    width: 300px;
    height: 100px;
    padding: 20px 0;
    cursor: pointer;
    text-align: center;
    position: relative;
}

.block span {
    position: absolute;
    height: 2px;
    width: 0;
    background: #ff0000;
    -webkit-transition: all 0.2s ease;
}

.block span.top {
    top:0;
    right: 0;
}

.block span.bottom {
    bottom:0;
    left: 0;
}

.block:hover span {
    width: 100%;
}