JSFiddle - React, Tailwind, and code Playground

by untaldouglas

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>
  <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" placeholder="Nombre del Diplomado" required>
                  <span class="icon is-small is-left">
                <i class="fas fa-asterisk"></i>
            </span>
                </div>
              </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" placeholder="Apellidos del Solicitante" required>
                  <span class="icon is-small is-left">
                <i class="fas fa-user-graduate"></i>
      ...

JavaScript

export default {
        data() {
            return {
                isSubmitted: false,
                post: {
                    title: '',
                    content: '',
                    publishImmediately: true,
                    shareOn: ['Facebook'],
                    category: 'Backend',
                    series: 'Complete Guide to Elasticsearch'
                },
                formData: {
                    socialMedia: ['Facebook', 'Twitter'],
                    categories: ['Frontend', 'Backend'],
                    series: [
                        'Vue.js: From Beginner to Professional',
                        'Complete Guide to Elasticsearch'
                    ]
                }
            };
        }
    }