JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Start of First Page -->
  <div data-role="page" id="page-1">

      <div data-role="header" id="header-1">
          <div data-role="navbar" id="navbar-1">
            <ul>
              <li><a data-theme="b" href="#page-1">Page 1</a></li>
              <li><a data-theme="a" href="#page-2">Page 2</a></li>
            </ul>
        </div>
      </div>

      <div data-role="content">

          <div class="textStyle-1">
              <br /><br /><br />
              <h2>Page 1</h2><br/>
              This is sample text inside page 1.<br />
              Page ONE is the FIRST page.
              <br /><br /><br />
          </div>

          <a data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" id="nextPage" href="#page-2">Next Page</a>
      </div>

  </div>

  <!-- Start of Second Page -->
  <div data-role="page" id="page-2">

      <div data-role="header" id="header-2">
          <div data-role="navbar" id="navbar-2">
            <ul>
              <li><a data-theme="a" href="#page-1">Page 1 aka Back</a></li>
              <li><a data-theme="b" href="#page-2">Page 2</a></li>
            </ul>
        </div>
      </div>

      <div data-role="content">

          <div class="textStyle-2">
              <br /><br /><br />
              <h2>Page 2</h2><br/>
              This is sample text inside page 2.<br />
              Page TWO is the SECOND page.
              <br /><br /><br />
          </div>

          <a data-role="button" data-transition="fade" data-icon="arrow-l" data-iconpos="left" id="previousPage" href="#page-1">Previous Page</a>
      </div>

  </div>

CSS

.textStyle-1 {
    font-size: 20px;
    color: blue;
    text-align: center;
}


.textStyle-2 {
    font-size: 20px;
    color: green;
    text-align: center;
}