JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
        <p class="slide" style="background-color:red;">
            test
            <span>></span>
        </p>
    </div>
    <div class="wrapper">
        <p class="slide" style="background-color:blue;">
            test
            <span>></span>
        </p>
    </div>
    <div class="wrapper">
        <p class="slide" style="background-color:yellow;">
            test
            <span>></span>
        </p>
    </div>
    <div class="wrapper">
        <p class="slide" style="background-color:green;">
            test
            <span>></span>
        </p>
    </div>

CSS

.wrapper {
    overflow: hidden;
    width: 200px;
    height: 30px; 
    margin-top: 10px;
}

.slide {
    position: absolute;
    left: -180px;
    width: 200px;
    height: 30px;
    transition: 1s;
    text-align: center;
}

.slide span {
    float:right;
    font-weight: bold;
    margin: 5px 5px 0px 0px;
}

.wrapper:hover .slide {
    transition: 1s;
    left: 0;
}