Add footer and links

src/App.vue

@@ -12,6 +12,22 @@
     <main>
       <recent-talks/>
     </main>
+
+    <footer class="py-20 bg-black">
+      <div class="max-w-6xl mx-auto">
+        <div class="grid grid-cols-3">
+          <section>
+            <h2 class="pb-2 text-xl font-bold border-b-2 text-white">Links</h2>
+
+            <div class="mt-6 space-x-1">
+              <a href="#" class="btn btn-blue">Meetup</a>
+              <a href="#" class="btn btn-blue">Twitter</a>
+              <a href="#" class="btn btn-blue">YouTube</a>
+            </div>
+          </section>
+        </div>
+      </div>
+    </footer>
   </div>
 </template>
 

src/assets/css/tailwind.css

@@ -2,6 +2,16 @@
 
 @tailwind components;
 
+.btn {
+  @apply px-4 py-3 inline-block text-lg rounded-lg
+}
+
+.btn-blue {
+  @apply bg-blue-500 border border-blue-600 text-white;
+  @apply transition-colors ease-in-out duration-300;
+  @apply hover:bg-blue-550
+}
+
 .embed-responsive {
   @apply block relative h-0 p-0 overflow-hidden;
   padding-bottom: 56.25%

tailwind.config.js

@@ -3,7 +3,11 @@ module.exports = {
   theme: {
     colors: {
       black: '#222',
-      blue: '#204d74',
+      blue: {
+        500: '#337ab7',
+        550: '#286090',
+        600: '#204d74'
+      },
       white: '#fff',
       yellow: '#fde546'
     },
@@ -11,4 +15,7 @@ module.exports = {
   },
   variants: {},
   plugins: [],
+  experimental: {
+    applyComplexClasses: true
+  }
 }