JSFiddle - React, Tailwind, and code Playground

HTML

<h1>blaasdfasf</h1><p> So I am trying to set up vertical rhythm on a page. But p is not respecting bottom margin of h1. Can someone explain me why? So I am trying to set up vertical rhythm on a page. But p is not respecting bottom margin of h1. Can someone explain me why? So I am trying to set up vertical rhythm on a page. But p is not respecting bottom margin of h1. Can someone explain me why? So I am trying to set up vertical rhythm on a page. But p is not respecting bottom margin of h1. Can someone explain me why?  </p>

CSS

html {
  font-size: 18px;
  line-height: 1.5;
}

h1 {
font-size: 30px;
line-height: 1.5;
 margin:4.5px 0 4.5px;
        
}

p {
    margin: 0;
    padding: 0;
}