JSFiddle - React, Tailwind, and code Playground

by Dano007

HTML

<div class="container">
					<!--Data is stored in these divs but not they are not displayed to the user!-->

					<div id="div_uname" style="display:none;"></div>
					<div id="div_email" style="display:none;"></div>
					<div id="div_gender" style="display:none;"></div>
					<div id="profile_pic"></div>

				</div>	

				<!--This is what the user sees. The id calls JS that enables the input field to be edited!-->

				<!--Displays user profile information on the page!-->

				<div class="container">


					<ul>

						<li>
							<input type="text" class="div_uname" id="username" value="" />
						</li>
						<li>
							<input type="text" class="div_email" id="email" value="" />
						</li>
						<li>
							<input type="text" class="div_gender" id="gender" value="" />
						</li>

						<li>
							<button class="button button-blue" id="save">Save Name</button>

						</li>

					</ul>
				</div>






				<!--This script displays the user profile data on the page and allows the user to update the details -->
				<script type="text/javascript">
					Parse.initialize("79tphN5KrDXdjJnAmehgBHgOjgE2dLGTvEPR9pEJ", "9lblofQNZlypAtveU4i4IzEpaOqtBgMcmuU1AE6Y");
                    
                         Parse.User.logIn("dave", "delvedia", {
  success: function(user) {
    console.log("Logged in!");
  }
});

	// Makes sure the current user is selected//

	// Pulls the user data from parse and stores in variables//
	var user = Parse.User.current();
	user.fetch().then(function(fetchedUser) {
		var username = fetchedUser.getUsername();
		var email = fetchedUser.getEmail();
		var gender = user.get("gender");
		var imgPaht = user.get("pic");


		// Outputs the data to the users view//

		// Adds the contents of the variables into the html divs//

		document.getElementById("div_uname").innerHTML = username;
		$(".div_uname")
		.val($("#div_uname").text())

		document.getElementById("div_email").innerHTML =...