JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://reactiveraven.github.io/jqBootstrapValidation/css/bootstrap.css">
<script src="http://reactiveraven.github.io/jqBootstrapValidation/js/jqBootstrapValidation.js"></script>
<script src="http://reactiveraven.github.io/jqBootstrapValidation/js/bootstrap.js"></script>
<button type="button" class="susc btn btnblack" style="margin-top: 10px;padding: 5px 12px 5px 12px;margin-left: 18px;color: #fff;"><span class="glyphicon glyphicon-heart" style="margin-right:5px;"></span>Suscribirse</button>

  <div id="page" class="row-fluid"><div class="page-header"><div id="dialog" style="display: none;" title="Task detail">

    <div class="modal-body">
       <div class="row-fluid" style="padding-bottom: 0px;">
<form class="form-horizontal" id="myform" novalidate="">
<div class="control-group">
                            <label class="control-label" for="name">Nombre</label>
                            <div class="controls">
                                <input type="name" class="form-control" data-validation-required-message="Debes escribir tu nombre" name="name" id="name" required="true" aria-invalid="true">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="email">Correo electrónico</label>
                            <div class="controls">
                                <input type="email" class="form-control" data-validation-required-message="No has escrito correctamente el correo electrónico" name="email" id="email" required="" aria-invalid="true">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="emailAgain">Correo electrónico (otra vez)</label>
                            <div class="controls">
                                <input type="email"...

CSS

*{ margin:0; padding:0; }

html {
position: relative;
min-height: 100%;
}
body {
    padding:0;
height:100%;
width: 100%;
    margin: 0 0 37px; /* bottom = footer height */
padding-top: 50px;
font-family: 'Roboto', 'sans-serif'; }
h1, h2, h3, h4, h5, h6 {

font-family: 'Open Sans', 'sans-serif'; 
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
.navbar-inverse {
background-color: #D3D3D3;
border-color: #bdbdbd;
}
.nav > li > a {

font-weight: 300;

}
.modalok {
z-index: 1000000000;
display: block;
width: 285px !important;
height: 287px !important;
color: green;
font-size: 290px;
position: relative;
line-height: 230px;
margin: 0 auto;

}
.modalsuccessp {
text-align: center;
font-size: 55px;
text-shadow: 0px 1px 0px #000;

}

.correct, .correct2, .correct3 {
z-index: 1000000000;
display: none;
width: 500px !important;
height: 500px !important;
color: green;
font-size: 282px;

}
.correct {
top: 141%;
position: absolute;
left: 9%;
}
.correct2 {
top: 141%;
position: absolute;
left: 37%;
}
.correct3 {
top: 141%;
position: absolute;
right: 1%;
}
.active {
border-left: 1px solid #bdbdbd;
z-index: 10000;
margin-bottom: -1px;
top: -1px;
background: #fff;
height: 57px;
border-right: 1px solid #BDBDBD;
}
.row-fluid {padding-bottom:55px; }
.modalinput {width: 62% !important; }
.footerrow {
background-color: #D3D3D3;
text-shadow: 0px 1px 0px #fff;
border-top: 1px solid #bdbdbd;
width: 100%;
font-weight: 400;
   position: absolute;
    left: 0;
    bottom: 0;
height: 37px;
color: #797979;
padding: 9px 10px 0px 10px;
font-size: 11px;
}
.active:before {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 5px;
background: #FFFFFF;
}

.col-md-1 {
width: 3.333333%;
float: left;
}
.navbar-brand {
line-height: 22px;
padding: 15px 4px;
font-size: 20px;
margin-left: 15px;
margin-right: 27px;
width: 140px;
}
.navbar-nav > li > a {
padding-top: 18px;
padding-bottom: 15px;
}
.firecolor {
color: rgb(255, 122, 0);
text-shadow: 0px 1px 0px...

JavaScript

$('input,textarea').jqBootstrapValidation(
  {

    submitError: function ($form, event, errors) { 
      $("#myform").effect( "shake" );
$("#myform").on("submit",function(e) {
    e.preventDefault(); // stop normal submission
    });
    }
  }
);
$('input,textarea').jqBootstrapValidation(
  {
    submitSuccess: function ($form, event, errors) { 
    	var audio = $("audio")[0];
    audio.play();
      $("#myform").hide().html("<span class='modalok glyphicon glyphicon-ok'></span><p class='modalsuccessp'>¡Muchas gracias!</p>").fadeIn('slow');
     setTimeout(function(){
            $('#dialog').dialog('close')
      }, 2000)

    }

  });

$(function () {
        $("[rel='tooltip']").tooltip();
    });

function closemenu() {
   $(function(){ 
     var navMain = $("#nav-main");

     navMain.on("click", "a", null, function () {
         navMain.collapse('hide');
     });
 });
}

   
$( document ).ready(function() {
$("#btnClose").click(function () {
            $('#dialog').dialog('close')
});
$(".form-control").focus(function(){
    $(this).parents(".control-group:not(.error)").find("label").css("color","#222");
}).blur(function () {
    $(this).parents(".control-group:not(.error)").find("label").css("color","#ccc");
});
$('#legal').popover();
   $(function () { $('#myform').find('input,select,textarea').jqBootstrapValidation(); } );

 


function fModalEstadoInicial(){
}

$("#btnClose").click(function () {
    fModalEstadoInicial();
});
$( "#dialog" ).on( "dialogclose", function( event, ui ) { 
    bluroff();
});
function bluroff() {
   $( ".divBody" ).removeClass( "notouch blur" );
   $( ".divHead" ).removeClass( "notouch blur" );
   $( ".footerrow" ).removeClass( "notouch blur" );
   $( ".divBody" ).addClass( "bluroff" );
   $( ".divHead" ).addClass( "bluroff" );
   $( ".footerrow" ).addClass( "bluroff" );
}

function bluron() {
    $( ".divBody" ).addClass( "notouch blur" );
    $( ".divHead" ).addClass( "notouch blur" );
    $( ".footerrow" ).addClass(...