JSFiddle - React, Tailwind, and code Playground

by Paul Esch-Laurent

HTML

<div class="container"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore consequuntur rem molestiae labore hic blanditiis earum optio, quae placeat. Deleniti impedit, maxime sequi culpa mollitia deserunt iure aut, alias numquam?</div>
<div>Neque, praesentium natus, officiis obcaecati perspiciatis cupiditate consequuntur voluptas vero officia voluptatibus, ab tempora exercitationem cum nobis consequatur quibusdam nostrum soluta autem doloribus repudiandae quia inventore ut accusamus, placeat architecto?</div>
<div>Odit magnam, autem sit vel. Quaerat dolorum rem corporis at, nobis dicta, fuga voluptas harum molestiae vero? Dolor, perferendis, ipsum! Iste a, repellat quas similique commodi excepturi eaque enim mollitia.</div></div>

CSS

.container
{
    width: 600px;
    left: -2px;
    padding-top: 275px;
    padding-left: 37px;
    position: relative;

}

@media (min-width: 800px) {
.container
{
    width: 1375px;
    left: -60px;
    -webkit-animation: fadeonresize 0.6s ease-in-out;
}
}

@media (min-width: 400px) {
.container
{
    width: 1575px;
    left: -140px;
    padding-top: 272px;
    -webkit-animation: fadeonresize 0.6s ease-in-out;
}
}

@media (min-width: 200px) {
.container
{
    width: 1800px;
    left: -260px;
    padding-left: 36px;
    padding-top: 285px;
    -webkit-animation: fadeonresize 0.6s ease-in-out;
}
}

@-webkit-keyframes fadeonresize { from { opacity: 0; } to { opacity: 1; }}