JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet"  href="http://jquerymobile.com/test/css/themes/default/" />  
<link rel="stylesheet"  href="http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.css" />
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"/>
<style>
    .ui-content.ui-scrollview-clip {
        padding: 0;
    }
    .ui-content.ui-scrollview-clip > div.ui-scrollview-view {
        margin: 0;
        padding: 15px;
    }
    .ui-content.ui-scrollview-clip > .ui-listview.ui-scrollview-view {
        margin: 0;
    }
    
</style>
    <script src="http://jquerymobile.com/test/js/jquery.js"></script>
    <script src="http://jquerymobile.com/test/js"></script>
    <script src="http://jquerymobile.com/test/experiments/scrollview/jquery.easing.1.3.js"></script>
    <script src="http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.js"></script>
    <script src="http://jquerymobile.com/test/experiments/scrollview/scrollview.js"></script>
    <script src="http://jquerymobile.com/test/docs/lists/docs/docs.js"></script>
</head> 
<body > 

<div data-role="page" class="page" id="home" >
    <div data-role="header">
        <h1>Sample</h1>
    </div><!-- /header -->

    <div data-role="content">
        
        <div  data-role="fieldcontain">
    <label for="tf">Name</label>
    <input type="text" name="tf" id="tf" />
</div>
<div  data-role="fieldcontain">
    <label for="ta">Address</label>
    <textarea name="ta" id="ta" rows="5" cols="10"></textarea>
</div

    </div><!-- /content -->

</div>
</body>
</html>