JSFiddle - React, Tailwind, and code Playground

by Francesco Frustaci

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://rawgit.com/matfish2/vue-tables-2/master/dist/vue-tables-2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<template>
  <modal name="input-focus-modal"
         :height="150"
         :adaptive="true"
         @opened="opened">
    <div style="padding: 30px; text-align: center">
      <input class="huge-font" type="text" placeholder="email" ref="email">
    </div>
  </modal>
</template>
<script>

CSS

input.huge-font {
    font-size: 70px;
    font-weight: 100;
    text-align: center;
    min-width: auto;
    width: 100%;
  }

JavaScript

Vue.component('InputFocusModal', {
  template: '<h1>Welcome to coligo!</h1>'
});
  
  
  
  
  name: 'InputFocusModal',
  methods: {
    opened (event) {
      console.log(this.$refs.email)
    //  this.$refs.email.focus();
    }
  }
}