<div id="app" class="text-black antialiased h-screen flex items-center justify-center bg-gray-100">
  <div class="w-full max-w-md mb-3 p-6 border border-gray-300 rounded bg-white">
    <!-- title -->
    <div class="text-2xl font-bold mb-6">Sign up</div>
    <!-- controls -->
    <div class="mt-4">
      <div class="text-sm pb-1 text-gray-600">Email</div>
      <div>
        <input type="text" class="border border-grey-300 rounded w-full px-3 py-2">
      </div>
    </div>
    <div class="mt-4">
      <div class="text-sm pb-1 text-gray-600">Password</div>
      <div>
        <input type="password" class="border border-grey-300 rounded w-full px-3 py-2">
      </div>
    </div>
    <div class="mt-5">
      <input type="checkbox" id="daily" v-model="didAgreeToPrivacy">
      <label for="daily" class="pl-1">I agree to Privacy Policy</label>
    </div>
    <!-- footer -->
    <div class="mt-8">
      <button class="bg-gray-400 rounded px-6 py-2 text-white" @click="didSubmit = true" :class="{'bg-blue-500': didAgreeToPrivacy, 'opacity-25': didSubmit, }">Submit</button>
    </div>
  </div>
</div>
input, textarea, button:focus {
  outline: none;
}

input::placeholder {
  color: #cbd5e0;
  opacity: 1;
}
var app = new Vue({
  el: '#app',
  data: {
    didAgreeToPrivacy: false,
    didSubmit: false
  },
  methods: {
    // functions go here
  }
})

External CSS

  1. https://cdn.jsdelivr.net/npm/tailwindcss@next/dist/tailwind.min.css
  2. https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.8/vue.min.js