JSFiddle - React, Tailwind, and code Playground

by ksbarrientosn

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Formulario de Matrícula</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
  
</head>

<body id="app">
  <h1>Educación Continua UJMD</h1>
  <section class="hero is-info is-fullheight">
    <div class="hero-body">
      <div class="container">
        <div class="columns is-centered">
          <div class="column is-5-tablet is-8-desktop is-12-widescreen">
            <form class="box">
              <div class="field has-text-centered">

                <img src="http://www.ujmd.edu.sv/images/Fotos_para_Contenido/Logotipo_UJMD2_jpg.jpg" width="167">
              </div>
              <div class="field has-text-centered">
                <h1>Formulario de Solicitud de Matrícula</h1>
              </div>

              <div class="field">
                <label class="label">Nombre del Diplomado</label>
                <div class="control has-icons-left">
                  <input class="input" type="email" v-model="diplomado" placeholder="Nombre del Diplomado" required>

                  <span class="icon is-small is-left">
                <i class="fas fa-asterisk"></i>
            </span>
                </div>
                <p v-if="diplomado == ''" class="help is-danger" font size=16px>
                    **
                </p>

              </div>


              <div class="field">
                <label class="label">Nombre Completo del Solicitante</label>
                <div class="control has-icons-left">
                  <input v-model="Apellidos" class="input" type="text"...

JavaScript

var app = new Vue({
  el: '#app',
  data: {
  	diplomado: '',
  	solicitante: '',
  	correo: '',
  	mensaje1: 'Este campo es obligatorio!',
    message: 'Funciona!'
  }
})