JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demonstrate Strange CSS Behavior</title>
</head>
<body>
<div id="block1">
    <div id="block2">&nbsp;
        <div  id="block3"><span><p>Hello!</p></span></div>
    </div>
</div>
</body>
</html>

CSS

body{
    padding: 0px;
    margin: 0px;
    background-color:gray;
}
#block1 {
    height: 70vh;
    width: 100vw;
    position: fixed;
    top: 0px;
    padding: 0px;
    margin: 0px;
    background-color:cyan;
    display: inline-block;
}
#block2{
  height:40%;
  background-color:green;
  /* the following lines actually have no effect
  padding: 0px;
  margin: 0px;
  position: relative;
  top:0;
  */
}
#block3{
  background-color:yellow;
}