JSFiddle - React, Tailwind, and code Playground

HTML

<section id="time"><p>08:30-10:30</p><p>10:30-12:30</p><p>12:30-14:30</p><p>15:30-17:30</p><p>17:30-19:30</p><p>19:30-21:30</p></section>

<section id="aa"></section

CSS

section {border: 1px black solid; width: 300px; height: 300px;}

section p 
    {
        width: 140px;
		height: 25px;
		border: 0px yellow solid;
		float: left;
		text-align: center;
		margin-top: 13px;
		margin-bottom: 13px;
		padding-top: 5px;
		font-size: 17px;
		font-weight: bold;
		color: rgb(225,225,0);
		background-color: green;
        
    }

JavaScript

function rotate()
{

if (document.getElementById("time").style.transform!="rotateX(360deg)")
					{
						document.getElementById("time").style.webkitTransition="all 1s";
						document.getElementById("time").style.mozTransition="all 1s";
						document.getElementById("time").style.oTransition="all 1s";
						document.getElementById("time").style.transition="all 1s";
							
						document.getElementById("time").style.webkitTransform="rotateX(360deg)";
						document.getElementById("time").style.mozTransform="rotateX(360deg)";
						document.getElementById("time").style.oTransform="rotateX(360deg)";
						document.getElementById("time").style.msTransform="rotateX(360deg)";
						document.getElementById("time").style.transform="rotateX(360deg)";
					}
				else
					{
						
						document.getElementById("time").style.webkitTransform="rotateX(0deg)";
						document.getElementById("time").style.mozTransform="rotateX(0deg)";
						document.getElementById("time").style.oTransform="rotateX(0deg)";
						document.getElementById("time").style.msTransform="rotateX(0deg)";
						document.getElementById("time").style.transform="rotateX(0deg)";
					}
    
}



document.getElementById("aa").addEventListener("click", rotate);