<div id="app" class="text-black antialiased h-screen flex items-center justify-center">
  <div class="w-full max-w-xs mb-4 h-48">
    <!-- title -->
    <div class="text-2xl font-bold mb-6">Preferences</div>
    <!-- controls -->
    <div class="mt-3">
      <input type="checkbox" id="daily" v-model="didSubscribeForDaily">
      <label for="daily" class="pl-1">Subscribe for daily newsletter</label>
    </div>
    <div class="ml-6" v-if="didSubscribeForDaily">
      <div class="mt-3">
        <input type="checkbox" id="politics">
        <label for="politics" class="pl-1">Exclude politics</label>
      </div>
      <div class="mt-3">
        <input type="checkbox" id="gossip">
        <label for="gossip" class="pl-1">Exclude gossip</label>
      </div>
    </div>
    <!-- footer -->
    <div class="mt-8">
      <button class="bg-blue-500 rounded px-6 py-2 text-white">
        Submit
      </button>
    </div>
  </div>
</div>
input, textarea, button:focus {
  outline: none;
}

input::placeholder {
  color: #cbd5e0;
  opacity: 1;
}
var app = new Vue({
  el: '#app',
  data: {
    didSubscribeForDaily: 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