JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ejemplo"></div>

CSS

.ejemplo {

    /* 1- Aplicar el estilo básico al elemento.*/
    background: #0BF; 
    padding: 20px; 
    width: 100px; 
    height:100px; 
    margin: 10px auto; 
    cursor: pointer; 
    
    /* 2- Especificar la propiedad de cambio con transition-property.*/ 
    transition-property: width,height; 
    -moz-transition-property: width,height; 
    -webkit-transition-property: width,height; 
    -o-transition-property: width,height; 
    
    /* 3- especificar la propiedad de duracion de la animacion con transition-duration.*/
    transition-duration: 500ms; 
    -webkit-transition-duration: 500ms; 
    -moz-transition-duration: 500ms; 
    -o-transition-duration: 500ms; 
} 

/*4- Especificar un valor de cambio a la propiedad seleccionada.*/ 
.ejemplo:hover { 
    width: 200px; height:200px; 
}