JSFiddle - React, Tailwind, and code Playground

by sweetmaanu

HTML

<div id="popUp">
    <div id="trans">
        <h1>hover me</h1>
    </div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate</p>
</div>

CSS

#popUp{
    height: auto;
    width:400px;
    background: #EEE;    
}
#trans{
    width:100%;
    height:200px;
    background: yellow;
    
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;

    -webkit-transform-origin: left top 0;
	   -moz-transform-origin: left top 0;
		 -o-transform-origin: left top 0;
		-ms-transform-origin: left top 0;
			transform-origin: left top 0;
}
#trans:hover{
    -moz-transform: scale(.5);
    -ms-transform: scale(.5);
    -o-transform: scale(.5);
    -webkit-transform: scale(.5);
    transform: scale(.5)
}
h1{
    text-align: center;
}