From 4d0360d13e7fb2604f9ec04b792f7a03183949d8 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Tue, 8 Sep 2020 21:44:17 +0100
Subject: [PATCH] Add footer and links

---
 src/App.vue                 | 16 ++++++++++++++++
 src/assets/css/tailwind.css | 10 ++++++++++
 tailwind.config.js          |  9 ++++++++-
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index dc7a822..4f64835 100644
--- a/src/App.vue
+++ b/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>
 
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
index 3a3a0b3..850d5e3 100644
--- a/src/assets/css/tailwind.css
+++ b/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%
diff --git a/tailwind.config.js b/tailwind.config.js
index cf7b5ed..50af5fa 100644
--- a/tailwind.config.js
+++ b/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
+  }
 }