<div id="app" class="text-black antialiased flex h-screen items-center justify-center bg-gray-900">
  <!-- Dialog view -->
  <div class="w-full max-w-sm bg-white rounded shadow-lg">
    <!-- Header -->
    <div class="bg-red-600 text-white rounded-t px-2 py-2 flex items-center">
      <div class="text-lg font-semibold px-2">Delete item?</div>
      <div class="flex-1"></div>
      <button class="ion-ios-information-circle-outline px-1 text-2xl text-red-400 hover:text-white"></button>
    </div>
    <!-- Content -->
    <div class="p-4">
      Are you sure you want to delete <span class="font-semibold">mockups.sketch</span>? This cannot be undone.
    </div>
    <!-- Footer -->
    <div class="border-t border-gray-200 py-2 px-2 flex items-center">
      <div class="flex-1"></div>
      <button class="bg-gray-300 hover:bg-gray-400 mr-1 px-6 py-2 rounded">Cancel</button>
      <button class="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded">Delete</button>
    </div>
  </div>
</div>
input, textarea, button:focus, select {
  outline: none;
  resize: none;
}

input::placeholder, textarea::placeholder {
  color: #A0AEC0;
  opacity: 1;
}

select {
  -webkit-appearance: none;
  background: center right 12px / 12px url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1703172/shevron.png) no-repeat;
}
var app = new Vue({
  el: '#app',
  data: {
    // variables go here
  },
  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://cdn.jsdelivr.net/npm/vue/dist/vue.js