JSFiddle - React, Tailwind, and code Playground

HTML

<p>Hover on the yellow box</p>
<div class='roller'>
    <div class='content'>
        <h1>Heading</h1>
        <p>Lorem ipsum and so on and so forth</p>
    </div>
</div>

CSS

.roller
{
    border: 1px solid red;
    background-color: gold;
    position: absolute;
    left: 0px;
    top: 60px;
    left: -270px; 
	transition:
		left 0.3s,
		background-color 3s;
}

.content
{
    display:inline-block;
    width: 300px;
}

.roller:hover
{
    left:0px;
    background-color: orange;
}