MyRufWork
diff --git a/‎README.md
Lines changed: 2 additions & 0 deletions b/‎README.md
Lines changed: 2 additions & 0 deletions
diff --git a/‎public/index.html
Lines changed: 19 additions & 13 deletions b/‎public/index.html
Lines changed: 19 additions & 13 deletions
@@ -1,3 +1,5 @@
 # Tailwind CSS
 
+A recipe website to understand Tailwind CSS basics.
+
 Based on [Tailwind CSS Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw) by Shaun Pelling - The Net Ninja (2020).
@@ -4,14 +4,16 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="styles.css" />
-    <title>Document</title>
+    <title>Food Ninja</title>
   </head>
-  <body class="text-gray-600">
+  <body class="text-gray-600 font-body">
     <div class="">
       <div class="">
         <nav>
           <div class="">
-            <h1 class="font-bold uppercase"><a href="/">Food Ninja</a></h1>
+            <h1 class="font-bold uppercase p-4 border-b border-gray-100">
+              <a href="/">Food Ninja</a>
+            </h1>
           </div>
           <ul>
             <li class="text-gray-700 font-bold">
@@ -26,18 +28,20 @@ <h1 class="font-bold uppercase"><a href="/">Food Ninja</a></h1>
           </ul>
         </nav>
       </div>
-      <main>
-        <div class="">
-          <a href="#">Log in</a>
-          <a href="#">Sign up</a>
+      <main class="px-16 py-6">
+        <div class="flex justify-center md:justify-end">
+          <a href="#" class="text-primary">Log in</a>
+          <a href="#" class="text-primary ml-2">Sign up</a>
         </div>
         <header>
           <h2 class="text-gray-700 text-6xl font-semibold">Recipes</h2>
           <h3 class="text-2xl font-semibold">For Ninjas</h3>
         </header>
         <div class="">
-          <h4 class="font-bold">Latest Recipes</h4>
-          <div class="">
+          <h4 class="font-bold mt-12 pb-2 border-b border-gray-200">
+            Latest Recipes
+          </h4>
+          <div class="mt-8">
             <div class="">
               <img src="img/stew.jpg" alt="stew" />
               <div class="">
@@ -46,12 +50,14 @@ <h4 class="font-bold">Latest Recipes</h4>
               </div>
             </div>
           </div>
-          <h4 class="font-bold">Most Popular</h4>
-          <div class="">
+          <h4 class="font-bold mt-12 pb-2 border-b border-gray-200">
+            Most Popular
+          </h4>
+          <div class="mt-8">
             <!-- cards -->
           </div>
-          <div class="">
-            <div class="">Load more</div>
+          <div class="flex justify-center">
+            <div class="bg-secondary-100 text-secondary-200">Load more</div>
           </div>
         </div>
       </main>