JSFiddle - React, Tailwind, and code Playground

by Ali Uygur

HTML

<div class="transitions">
    <p>Transitions</p>
</div>

CSS

.transitions {
    width:200px;
    height:100px;
    border:1px solid #000;
    background-color:grey;
    float: left;
    display:block;
    margin:30px;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:0.1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:0.2s;
/* Mozilla */
-moz-transition-property:width;
-moz-transition-duration:0.1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:0.2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:0.1s;
-o-transition-timing-function:linear;
-o-transition-delay:0.2s;
/* Standart */
transition-property:width;
transition-duration:0.1s;
transition-timing-function:linear;
transition-delay:0.2s;
}

.transitions:hover {
    width: 300px;
    height: 200px;
}
p {
    color:white;
    text-align:center;
    margin:40px auto;
}