JSFiddle - React, Tailwind, and code Playground

HTML

<header>STICKY HEADER</header>

<div>
    <form action="#">
        
        <br>
        
        <input type="text" name="input" placeholder="Input field" required/>
        
        <br><br>
        
        <textarea name="textarea" placeholder="Textarea field" required></textarea>
        
        <p>1. Do not fill the input field. Submit at the bottom of the page while the header is below the input field. Notice how the sticky field appropriately scrolls at the top of the field.</p>
        
        <p>2. Fill the inpuy field and do not fill the textarea field. Submit at the bottom of the page while the header is below the textarea field. Notice how the sticky filed does not scroll appropriately - instead it completely covers the textfield.</p>
        
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        
        <input type="submit" value="Submit">
    </form>
</div>

CSS

body {
    margin-top: 50px;
    text-align: center;
}

input { /* WORKS */
  scroll-margin-top: 50px;
}

textarea { /* DOES NOT WORK */
  scroll-margin-top: 50px;
}

header {
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: yellow;
    top: 0;
}