JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div data-role="page">
  <div data-role="header" data-position="fixed">
    <h1>My header</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>Content goes here..</p>
  </div>

  <div data-role="footer" data-position="fixed">
    <h1>My footer</h1>
  </div>
</div> 

</body>

CSS

.ui-header, .ui-footer, .ui-content {
    margin-right: 25px;
    margin-left: 25px;
}