JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<title>Voting</title>
<script>
function generateQRCode(){
var startNode="BEGIN:VCARD"+"\n"+"VERSION:3.0"+"\n";
var endNode="END:VCARD";
startNode+="N:"+lastName.value.trim()+";"+firstName.value.trim()+"\n";
startNode+="FN:"+firstName.value.trim()+" "+lastName.value.trim()+"\n";
// startNode+="EMAIL:"+email.value.trim()+"\n";
startNode+="ORG:"+org.value.trim()+"\n";
// startNode+="TITLE:"+title.value.trim()+"\n";
// startNode+="NOTE:"+url.value.trim()+"\n";
// startNode+="URL:"+url.value.trim()+"\n";
// startNode+="TEL:"+phoneNo.value.trim()+"\n";
//startNode+="ADR:"+address1.value.trim()+";"+address2.value.trim()+";"+city.value.trim()+";"+state.value.trim()+";"+country.value.trim()+";"+zipCode.value.trim()+"\n";
startNode+="ADR:"+code.value.trim()+";"+areaname.value.trim()+";"+address1.value.trim()+";"+address2.value.trim()+";"+address3.value.trim()+"\n";
startNode+=endNode;
this.qrImage.style.display ='none';
this.qrImage.src="https://chart.googleapis.com/chart?cht=qr&choe=UTF-8&chs=200x200&chl="
+encodeURIComponent(startNode);
this.qrImage.style.display ='inline';
this.vcard.value=startNode;
this.vcard.style.display ='inline';
this.vcardDiv.style.display ='inline';
this.sampleQR.style.display ='none';
}
</script>
<style>
DIV{
color:#0882cd;
}
H3
{
color:PURPLE;
}
label{
font-family: 'Cairo', sans-serif;
display: block;
font-weight: bold;
font-size: 0.929em;
}
#formButton{
margin-top: 2%;
background-color: rgb(250, 250, 250);
border: 0.5px solid grey;
border-radius: 8px;
box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.09);
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
#header{
width: 100%;
height: 1%;
display: flex;
margin-bottom: 20px;
justify-content: center;
align-items: center;
box-shadow: -0.5px 4px 4px rgba(0, 0, 0, 0.09);
}
table {
width: 500px;
}
.fakey {
border: solid 1px;
color: #ccc;
font-family: sans-serif;
font-size: .9em;
}
.fakey...