diff --git a/src/components/Card.astro b/src/components/Card.astro
index 7c28dd6..36549f0 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -1,23 +1,44 @@
 ---
 ---
 
-<div>
+<div
+  class="bg-white border rounded-md overflow-hidden border-gray-200 shadow-sm max-w-sm"
+>
   <img
     alt=""
+    class="w-full h-auto object-cover"
     src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_18596650c01%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_18596650c01%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.70000076293945%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
   />
 
-  <p>
-    This is a wider card with supporting text below as a natural lead-in to
-    additional content. This content is a little bit longer.
-  </p>
+  <div class="p-4 font-sans">
+    <p>
+      This is a wider card with supporting text below as a natural lead-in to
+      additional content. This content is a little bit longer.
+    </p>
 
-  <footer>
-    <ul>
-      <li><a href="#0">View</a></li>
-      <li><a href="#0">Edit</a></li>
-    </ul>
+    <footer class="mt-6 flex items-center justify-between">
+      <div>
+        <ul
+          class="flex border border-gray-500 divide-x divide-gray-500 text-sm text-gray-500 rounded"
+        >
+          <li>
+            <a
+              class="block px-2 py-1 transition-colors ease-in-out duration-200 hocus:bg-gray-500 hocus:text-white"
+              href="#0">View</a>
+          </li>
+          <li>
+            <a
+              class="block px-2 py-1 transition-colors ease-in-out duration-200 hocus:bg-gray-500 hocus:text-white"
+              href="#0">Edit</a>
+          </li>
+        </ul>
+      </div>
 
-    <p><span>Reading time: </span>9 minutes</p>
-  </footer>
+      <div>
+        <p class="text-sm text-gray-500">
+          <span class="sr-only">Reading time:</span>9 minutes
+        </p>
+      </div>
+    </footer>
+  </div>
 </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5c39f87..17e02c0 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -23,16 +23,22 @@ import Navbar from "../components/Navbar.astro";
         simply skip over it entirely.
       </p>
 
-      <div class="mt-5 mx-auto max-w-md flex flex-col justify-center gap-2 sm:flex-row sm:gap-1">
+      <div
+        class="mt-5 mx-auto max-w-md flex flex-col justify-center gap-2 sm:flex-row sm:gap-1"
+      >
         <Button shape="rounded" type="primary" text="Main call to action" />
         <Button shape="rounded" type="secondary" text="Secondary action" />
       </div>
     </Jumbotron>
 
-    <div>
-      {[...Array(9).keys()].map((_) => (
-        <Card />
-      ))}
+    <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"
+        >
+          {[...Array(9).keys()].map((_) => <Card />)}
+        </div>
+      </div>
     </div>
   </body>
 </html>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 5d3bc79..2839ff2 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,9 +1,9 @@
-const colors = require('tailwindcss/colors');
+const colors = require("tailwindcss/colors");
 const plugin = require("tailwindcss/plugin");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
     extend: {
       colors: {
@@ -11,12 +11,26 @@ module.exports = {
           750: "#343a40",
           ...colors.neutral,
         },
-      }
+      },
+      fontFamily: {
+        sans: [
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Segoe UI",
+          "Roboto",
+          "Helvetica Neue",
+          "Arial",
+          "sans-serif",
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+        ],
+      },
     },
   },
   plugins: [
     plugin(({ addVariant }) => {
-      addVariant('hocus', ['&:hover', '&:focus'])
+      addVariant("hocus", ["&:hover", "&:focus"]);
     }),
   ],
-}
+};