JSFiddle - React, Tailwind, and code Playground

by zequez

HTML

<div id="wrapper">
    <div id="transformer">
        <div id="relative">
        <div id="fixed"></div>
        </div>
    </div>
</div>

CSS

#wrapper {
    height: 200px;
    width: 300px;
    padding-top: 50px;
    background: brown;
}

#transformer {
    height: 100px;
    width: 300px;
    background: green;
    -webkit-transition: -webkit-transform 0.5s;
}

#transformer:hover {
    -webkit-transform: translate3d(20px, 0, 0);
}

#relative {
    position: relative;
}

#fixed {
    position: fixed;
    height: 20px;
    width: 300px;
    background: blue;
    -webkit-transform: translateZ(0);
}