Add and style footer

src/components/Footer.astro

@@ -0,0 +1,19 @@
+---
+---
+
+<footer class="text-gray-500">
+  <div class="max-w-xl mx-auto py-12 px-6 lg:max-w-6xl lg:grid lg:grid-cols-10">
+    <div class="markup lg:col-span-6">
+      <p>
+        This page is an experiment for my <a
+          href="https://www.oliverdavies.uk/talks/taking-flight-with-tailwind-css"
+          >Taking Flight with Tailwind CSS</a
+        > talk, where I rebuild Bootstrap CSS examples with Tailwind.
+      </p>
+    </div>
+
+    <div class="markup lg:col-span-4 lg:text-right">
+      <p><a href="#">Back to top</a></p>
+    </div>
+  </div>
+</footer>

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import Button from "../components/Button.astro";
 import Card from "../components/Card.astro";
+import Footer from "../components/Footer.astro";
 import Jumbotron from "../components/Jumbotron.astro";
 import Navbar from "../components/Navbar.astro";
 ---
@@ -34,11 +35,26 @@ import Navbar from "../components/Navbar.astro";
     <div class="bg-gray-100">
       <div class="max-w-xl mx-auto py-12 px-6 lg:max-w-6xl">
         <div
-          class="grid grid-cols-1 gap-8 place-items-center md:grid-cols-2 md:gap-6 lg:grid-cols-3"
+          class="grid grid-cols-1 gap-8 place-items-center md:grid-cols-2 md:gap-6 lg:grid-cols-3 lg:gap-8"
         >
           {[...Array(9).keys()].map((_) => <Card />)}
         </div>
       </div>
     </div>
+
+    <Footer />
   </body>
 </html>
+
+<style is:global>
+  .markup p {
+    @apply leading-relaxed;
+  }
+
+  .markup a {
+    @apply text-blue-500;
+  }
+  .markup a:hover {
+    @apply text-blue-800 underline;
+  }
+</style>