JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type='text/javascript'>
      function start(id) {
    id=document.getElementById(id);
     id.style.display="block";   
id.style.width='240px'; 
id.style.height='240px'; 
id.style.opacity='1';

}  
    </script>
</head>
    <body>
        <p>При нажатии на кнопку скрипт делает <b>див window</b> видимым,  изменяет его размеры и прозрачность. Но свойство <b>transition</b>, которое должно обеспечить плавность измений не хочет работать, если элемент имеет свойство <b>display: none;</b> при первой отрисовке страницы. А так норм :)</p>
        <div id="start" onClick="start('window')">Нажми на меня</div>
  
        <div id="window"></div>
              <p>Действие скрипта без свойства <b>display: none;</b></p>
               <div id="start" onClick="start('window2')">Нажми на меня</div>
        <div id="window2"></div>
    </body>
</html>

CSS

#window2{
   
    background-color: blue;
    width:  0px;
    height:  0px;
    opacity:0;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3 ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

#window{
    display: none;
    background-color: blue;
    width:  0px;
    height:  0px;
    opacity:0;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3 ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}


#start{
  width:  150px;
    margin:15px;
    height:  20px;
    padding:3px;
background-color: gray;
cursor: pointer;
color:  #fff;  
}