JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

<meta charset=utf-8 />
<title>Test Navigation</title>

</head>
 <body>
    
<!-- Start of first page -->
<div data-role="page" id="page-1">

    <div data-role="header" data-position="fixed">
        <h1>Page 1</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#page-2">One</a></li>
                <li><a href="#page-2">Two</a></li>
                <li><a href="#page-2">Three</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->

    <div data-role="content">    
        <h1>Directions:</h1> 
        <p>Scroll a select menu behind either a header or footer navbar button and try to select the navbar button. The expected result should take you to page 2. Android devices experience the select menu being triggered instead of the navbar button. iOS does not experience this problem</p>        
        <div data-role="fieldcontain">
           <label for="select-choice-1" class="select">Shipping method:</label>
           <select name="select-choice-1" id="select-choice-1">
              <option value="standard">Standard: 7 day</option>
              <option value="rush">Rush: 3 days</option>
              <option value="express">Express: next day</option>
              <option value="overnight">Overnight</option>
           </select>
        </div>
        
        <div data-role="fieldcontain">
           <label for="select-choice-1" class="select">Shipping method:</label>
           <select name="select-choice-1" id="select-choice-1">
              <option value="standard">Standard: 7 day</option>
              <option value="rush">Rush: 3...