JSFiddle - React, Tailwind, and code Playground

by wtkd

HTML

<body>
    <div id="teste">
      <div class="content-um" align="center">
        <div class="content-left">
          <div id='sso'>
            <h1 class="title">Stunning Title</h1>
            <p class="text-intro">
             Lorem ipsum with lasers,Lorem ipsum with rasers, Lorem ipsum with StarGazers:
            </p>
            <a id="cj_connect" data-fancybox-type="iframe" class="fancybox-manual-b sso-login-bt">Login</a>
          </div>
          <form>
            <div id='questions'>
              <h1 class="title">C`MON C`MON</h1>
                
              <input type='hidden' name="uid" id="uid" />
              <input type='hidden' name="nickname" id="nickname" />
              <input type='hidden' name="gender" id="gender" />
              <input type='hidden' name="email" id="email" />
              <input type='hidden' name="birthdate" id="birthdate" />
              <input type='hidden' name="avatar" id="avatar" />
            
              <h3 class="title">Perguntas:</h3>
              <p class="ask">1. voce prefere qual plataforma?</p>
              <ul class="f-quest" data-answer=2>
                <li><label for="f-quest-option1-radio1">Portatil</label><input type="radio" class="f-radio" id='f-quest-option1-radio1' name="option1"/></li>
                <li><label for="f-quest-option1-radio2">Console</label><input type="radio" class="f-radio" id='f-quest-option1-radio2' name="option1" /></li>
                <li><label for="f-quest-option1-radio3">PC</label><input type="radio" class="f-radio" id='f-quest-option1-radio3' name="option1" /></li>
                <li><label for="f-quest-option1-radio4">Nenhum sou gay</label><input type="radio" class="f-radio" id='f-quest-option1-radio4' name="option1" /></li>
              </ul>
            
              <p class="ask">2. Quantos livros você ja leu?</p>
              <ul class="f-quest" data-answer=3>
                <li><label for="f-quest-option2-radio1">40</label><input type="radio"...

CSS

@font-face {
font-family: "";
src: url("http://clickpages.clickjogos.com.br/fontes/collegiateinsideflf.eot"); /* para IE */
src: local("collegiateinsideflf"), url("http://site/fontes/collegiateinsideflf.ttf");
}

@font-face{
	font-family: 'collegiateinsideflf';
	src: url('collegiateinsideflf.eot');
	src: url('collegiateinsideflf.eot?#iefix') format('embedded-opentype'),
	     url('collegiateinsideflf.woff') format('woff'),
	     url('collegiateinsideflf.ttf') format('truetype'),
	     url('collegiateinsideflf.svg#webfont') format('svg');
}

#teste{
	font-size: 16px;
	font-family: 'Verdana', Arial, sans-serif;
	padding-bottom: 25px;
	width: 1440px;
	height: 1000px;
	background-image: url(../images/bg_21.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}

#teste .content-um{
	background: url(../images/pasta1440x.png) no-repeat center -100px;
	padding: 50px 0 30px 0;
	height: 860px;
	width: 1030px;
}

#teste .logo{
	left: 28%;
	display: block;
	cursor: pointer;
	padding: 30px 0 0 350px;
	width: 229px;
	height: 115px;
}

#teste .logo img{
	width: 229px;
	height: 115px;
}

#teste .logo-vm {
	height: 115px;
	width: 417px;
	background: url(../images/home/logo_vm.png) no-repeat;
	margin-top: 40px;
}

#teste .clear-um{clear:both;height: 195px;}

#teste .text-intro{
	text-align: left;
	color: #555;
	padding-top: 14px;
}

#teste .text-intro-link{
	padding: 10px 0;
}

#teste .text-intro-link a{
	font-weight: bold;
}

#teste .left{text-align: left;}

#teste h1.title{
	padding: 20px 0 0;
}

#teste h3.title{
	padding: 10px 0;
}

#teste .title{
	font-family: 'collegiateinsideflf', Verdana, Arial, sans-serif;
	text-align: left;
	border-bottom: 1px solid #ccc;
}
#teste .text-intro-link, #teste .text-intro-link a, #teste .title{font-size: 20px;}
#teste, #teste .content-um, #teste .tickets, #teste .kits{
	margin: 0 auto;
}

#teste .rules-um{
	overflow: auto;
	height: 622px;
	text-align: justify;
	color: #555;
	font-size: 12px;
	line-height: 27px;
}

#teste...

JavaScript

window.Form = (function() {
  function Form(options) {
    _self = this
    this.options = options

    $('#universidade-monstros #cj_connect').click(function() {  
      window.open(options.ssoUrl + '/' + options.ssoKey + '/', 'sharer', 'toolbar=no, width=657, height=700');
    })

    $('#universidade-monstros ul.f-quest input').change(function(){
      _self.validate(this)
      if(_self.isQuestionsValid()){
        $('#questions').append("<span class='redirect'>Você acertou todas. Daqui 3 segundos você será redirecionado.</span>")
        setTimeout('_self.showRedaction()', 3000)
      }
    })

    $('form').submit(function(e){
      e.preventDefault()
      if(_self.isAllValid()){
        _self.send()
      }
    });

    this.showSso()
  }

  Form.prototype.showSso = function(){
    $('#redaction').hide()
    $('#questions').hide()
    $('#sso').show()
  }

  Form.prototype.showQuestions = function(){
    $('#sso').hide()
    $('#redaction').hide()
    $('#questions').show()
  }

  Form.prototype.showRedaction = function(){
    $('#sso').hide()
    $('#questions').hide()
    $('#redaction').show()
  }

  Form.prototype.showSucess = function(){
    $('#sso').hide()
    $('#questions').hide()
    $('#redaction').show()
  }

  Form.prototype.setUser = function(attr){
    if(attr){
      $('#uid').val(attr.uid)
      $('#nickname').val(attr.nickname)
      $('#gender').val(attr.gender)
      $('#email').val(attr.email)
      $('#birthdate').val(attr.birthdate)
      $('#avatar').val(attr.avatar_big)
      this.showQuestions()
    }
  }

  Form.prototype.validate = function(input) {
    ul = $(input).parents('ul').first()
    answer = ul.data('answer')
    valid = ul.find('input')[answer] == input
    label = $(input).parents('li').find('label')

    ul.find('li span').remove()
    if(valid) {
      $("<span class='valid'> Parabéns, você acertou! </span>").appendTo(label)
    } else{
      $("<span class='invalid'> Hum, não foi dessa vez!...