JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Transition Animation CC</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">

      <div class="bg-gray" id="tr-w">
	  	<p>
		  Hover over me
		</p>
      </div>
      <div class="bg-gray" id="tr-h">
	  	<p>
		  Hover over me
		</p>
      </div>

      <div class="bg-gray" style="height: 30vh;" id="tr-r">
	 	<p>
			Hover over me
		</p>
      </div>
    </div>
    <script src="main.js" charset="utf-8"></script>
  </body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Arial", sans-serif;
}

.container {
  padding: 10px;
  margin-left: 20px;
}

.container > *[class*="bg"] {
  margin-left: 10px;
}

.bg-gray {
  margin: 10px 0px;
  background-color: #cbd5e0;
  border: 3px solid black;
  padding: 20px;
  margin-bottom: 20px;
  width: 30%;
}

#tr-w {
  transition: width 1s ease-in-out;
}

#tr-w:hover {
  width: 50%;
}

#tr-h {
  transition: height 2s ease-in-out;
}

#tr-h:hover {
  height: 40vh;
}

#tr-r {
  transition: width 1s ease-in-out, transform 2s ease-in-out;
}

#tr-r:hover {
  transform: rotateZ(180);
  width: 30vh;
}