JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<div data-role="page">
  <div data-role="header">
  <h1>Text Inputs</h1>
  </div>

  <div data-role="main" class="ui-content">
    <form method="post" action="demoform.asp">
      <div class="ui-field-contain">
        <label for="fullname">Full name:</label>
        <input type="text" name="fullname" id="fullname">
        <label for="bday">Date of Birth:</label>
        <input type="date" name="bday" id="bday">
        <label for="email">E-mail:</label>
        <input type="email" name="email" id="email" placeholder="Your email..">
      </div>
      <input type="submit" data-inline="true" value="Submit">
    </form>
  </div>
</div>

CSS

.ui-field-contain .ui-input-text {
  width: 60% !important;
}

/* Comment this out to see the difference */
/*.ui-field-contain .ui-input-text input {
  width: 80%;
  background: #efefef;
}
*/