JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="it" lang="it" >
     <head>
        <meta http-equiv="imagetoolbar" content="no"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'/>
  
         <title>http://localhost</title>
    
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js'></script>
      </head>
    
<body  >    <div id="container">
            

<div id="indexleft">
<!--  *********start passrecover left content**********  -->
<div class="top"></div>
<div><img src="view/template/default/images/indexleft.jpg" alt="" /></div>
<!--  ************* end passrecover left content***********  -->
</div><div id="header">
<div class="indexheader"><h1>crea il tuo profilo</h1></div>
 </div>
 <div>&nbsp;</div>
<div id="indexright">
<!-- ******register right content********  -->
<div id="indexcontainer">
<div class="register">
<form method="post" action="/index.php?page=entry/register">
<div><input name="username" class="textfields" />username [max 13]</div>
<div><input name="password" class="textfields" />password [minimo 4 caratteri]</div>
<div><input name="confirmpass" class="textfields" />confirm password</div>
<div><input name="email" class="textfields" />e-mail</div>
<div><input name="confirmemail" class="textfields" />confirm e-mail</div>
<div><input name="city" id="city" class="textfields" />type your city</div>
<div><input class="button" type="submit" name="send" value="Avanti" /></div>
</form>
</div>

</div>
<!-- ******end register content ********  -->
</div><div class="clearCol"></div>
<div id="footer">
<!--  **********start footer*********  -->
<p>Copyright &copy; 2001-2012 http://localhost <a...

JavaScript

(function($){
        selectCountry = function(data) {
         
            

        $( "#city" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "http://api.geonames.org/search?username=demo",
                    dataType: "json",
                    data: {
                        featureClass: "P",
                        style: "full",
                        type:"json",
                        maxRows: 12,
                        lang: data,
                        name_startsWith: request.term
                    },
                    success: function( data ) {
                        response( $.map( data.geonames, function( item ) {
                            
                            return {
                                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                value: item.name,
                                countryN : item.countryName,
                                regionN: item.adminName1,
                                cityN :item.name,
                                lat :item.lat,
                                lon :item.lng,
                                countryId :item.countryCode,
                                regionId :item.adminCode1,
                                cityId :item.geonameId
                                
                            }
                        }));
                    }
                });
            },
            minLength: 2,
            select: function( event, ui ) {
              
                
                $('<input>').attr({
                    type: 'hidden',
                    name: 'country',
                    value: ui.item.countryN
                }).appendTo('form');
                $('<input>').attr({
                    type: 'hidden',
                    name: 'region',
                    value: ui.item.regionN
  ...