JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href='//fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
<div class="invitation-margin">
<div id="" class="invitacion col-md-12">
<div id="" class="col-md-12 intro">
  MR. & MRS. PETER RICE & MR. AND MRS. STEVEN MILS<br>
  REQUEST THE PLEACERE OF YOUR COMPANY<br>
  AT THE MARIGE OF THEIR CHILDREN
</div>
<div id="" class="names col-md-12">Vanessa Brokee and Jeffrey David</div>

<div id="" class="when col-md-12">
  SATURDAY - THE SIXTEENTH OF APRIL - TWO THOUSEN SEVENTEEN
</div>
<div id="" class="at col-md-12">
  HALF PASS TWO IN THE AFTERNNON
</div>
<div id="" class="where col-md-12">Center Point Church</div>
<div id="" class="address col-md-12">56 PINE STEET - PLEASENT GROVE, UTAH</div>
</div>
</div>

<div id="" class="">
<input type="text" id="intro" /><br>
<input type="text" id="names" /><br>
<input type="date" id="when" data-date-format="DD MMMM YYYY" /><br>
<input type="time" id="at" /><br>
<input type="text" id="where" /><br>
<input type="text" id="address" /><br>
</div>

CSS

body{
  color:#979495;
}
.invitacion{
  display:block;
  border:1px solid #979495;
  }
.invitation-margin{
  width:calc(100% - 40px);
  padding:25px;
  margin:20px;
  background-color:#fdfcf4;
  min-height:300px;
  height:auto;
  -webkit-box-shadow: 0px 0px 10px -1px rgba(66,66,66,0.50);
  -moz-box-shadow: 0px 0px 10px -1px rgba(66,66,66,0.50);
  box-shadow: 0px 0px 10px -1px rgba(66,66,66,0.50);
}
.names{
   font-family: 'Sofia';
   font-size: 30px;
   text-align:center;
   padding:20px;
}
.intro{
  text-align:center;
  padding-top:15px;
  font-size:12px;
  text-transform: uppercase;
}
.when{
    text-align:center;
  padding-top:15px;
  font-size:12px;
    text-transform: uppercase;
}
.at{
    text-align:center;
  font-size:12px;
    text-transform: uppercase;
}
.where{
  font-family: 'Sofia';font-size: 20px;
   text-align:center;
   padding-top:5px;
}
.address{
    text-align:center;
  padding-bottom:15px;
  font-size:12px;
    text-transform: uppercase;
}

JavaScript

var month = new Array(12);
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";

var weekday = new Array();
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

var dayname = new Array();
//weekday[0] = "Sunday";
dayname[1] = "THE FIRST";
dayname[2] = "THE SECOND";
dayname[3] = "THE THIRD";
dayname[4] = "THE FOURTH";
dayname[5] = "THE FIVETH";
dayname[6] = "THE SIXTH";

jQuery('body').on('keyup','#intro',function(){
  $('.intro').html($('#intro').val());
});
jQuery('body').on('keyup','#names',function(){
  $('.names').html($('#names').val());
});


$("#when").on("change", function () {
$('.when').html($("#when").val());
var dateObj = new Date($("#when").val());
var monthnam = month[dateObj.getUTCMonth()]; 
var day =  weekday[dateObj.getUTCDay()];
var daynum =  dayname[dateObj.getUTCDay()];
var year = dateObj.getUTCFullYear();
newdate =  day +" - " + daynum + " OF " + monthnam + "- " + year;
$('.when').html(newdate);


    //var myDate = new Date($(this).val());
    //$('.when').html($("#when").val());
   // var dt_to = $.datepicker.formatDate('yy-mm-dd', new Date());
});

$("#at").on("change", function () {
    var myTime = new Time($(this).val());
    $('.at').html(myDate);
});
jQuery('body').on('keyup','#at',function(){
  $('.at').html($('#at').val());
});
jQuery('body').on('keyup','#where',function(){
  $('.where').html($('#where').val());
});
jQuery('body').on('keyup','#address',function(){
  $('.address').html($('#address').val());
});