Make AlertMessage a component

src/App.vue

@@ -1,5 +1,14 @@
 <template>
   <div>
+    <alert-message>
+      <p>
+        A clone of <a href="https://platform.sh">Platform.sh</a>’s new hosting dashboard.<br class="md:hidden">
+        Built with <a href="https://vuejs.org">Vue.js</a>
+        and <a href="https://tailwindcss.com">Tailwind CSS</a>
+        by <a href="https://www.oliverdavies.uk">Oliver Davies</a>.
+      </p>
+    </alert-message>
+
     <router-view/>
   </div>
 </template>

src/components/AlertMessage.vue

@@ -0,0 +1,16 @@
+<template>
+  <section class="bg-gun-powder p-3 text-center text-white text-sm font-semibold">
+    <slot></slot>
+  </section>
+</template>
+
+<style type="postcss" scoped>
+a {
+  @apply underline;
+
+  &:hover,
+  &:focus {
+    @apply no-underline
+  }
+}
+</style>

src/main.js

@@ -4,6 +4,7 @@ import router from './router'
 
 Vue.config.productionTip = false
 
+Vue.component('alert-message', require('@/components/AlertMessage').default)
 Vue.component('page-title', require('@/components/PageTitle').default)
 
 new Vue({

src/views/Projects.vue

@@ -1,14 +1,5 @@
 <template>
   <div>
-    <section class="bg-gun-powder p-3 text-center text-white text-sm font-semibold">
-      <p>
-        A clone of <a class="underline hocus:no-underline" href="https://platform.sh">Platform.sh</a>’s new hosting dashboard.<br class="md:hidden">
-        Built with <a class="underline hocus:no-underline" href="https://vuejs.org">Vue.js</a>
-        and <a class="underline hocus:no-underline" href="https://tailwindcss.com">Tailwind CSS</a>
-        by <a class="underline hocus:no-underline" href="https://www.oliverdavies.uk">Oliver Davies</a>.
-      </p>
-    </section>
-
     <header class="bg-gray-900 text-white pt-4 pb-12">
       <div class="max-w-6xl mx-auto px-4">
         <div class="flex justify-between items-center -mx-4">