JSFiddle - React, Tailwind, and code Playground

HTML

<div class="example_for_lima"></div>

CSS

.example_for_lima {
      width: 50px;
      height: 50px;
      background-color: blue;
      transition: width 1s ease-in-out, height 1s ease-in-out, background-color 1s ease-in-out;
      -webkit-transition: width 1s ease-in-out, height 1s ease-in-out, background-color 1s ease-in-out;
      -moz-transition: width 1s ease-in-out, height 1s ease-in-out, background-color 1s ease-in-out;
      -o-transition: width 1s ease-in-out, height 1s ease-in-out, background-color 1s ease-in-out;
  }
  .example_for_lima:hover {
      width: 300px;
      height: 300px;
      background-color: red;
      transition: width 1s ease-in-out, height 1s ease-in-out, background-color 1s ease-in-out;
      -webkit-transition: width 1s ease-in-out, height 1s ease-in-out, background-color 1s ease-in-out;
      -moz-transition: width 1s ease-in-out, height 1s ease-in-out, background-color 1s ease-in-out;
      -o-transition: width 1s ease-in-out, height 1s ease-in-out, background-color 1s ease-in-out;
  }