Add results box

david-tejada · Mar 25, 2024 · 789efd9 · 789efd9
1 parent 2bc68a9
commit 789efd9
Showing 1 changed file with 49 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -8,33 +8,63 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Frontend Mentor | IP Address Tracker</title>
   </head>
-  <body>
+  <body class="bg-gray-400">
     <header
       class="bg-[url('/pattern-bg-mobile.png')] bg-cover bg-no-repeat px-4 py-8 sm:bg-[url('/pattern-bg-desktop.png')]"
     >
       <h1 class="text-center text-2xl font-bold text-white">
         IP Address Tracker
       </h1>
-      <form action="">
-        <div
-          class="relative mx-auto mt-4 max-w-[50ch] overflow-hidden rounded-xl text-lg"
+
+      <div class="relative mb-36 grid sm:mb-12">
+        <form action="">
+          <div
+            class="relative mx-auto mt-4 max-w-[50ch] overflow-hidden rounded-xl text-lg"
+          >
+            <input
+              class="w-full p-4"
+              type="text"
+              name="query"
+              id="query"
+              placeholder="Search for any IP address or domain"
+            />
+            <button
+              class="absolute right-0 top-0 h-full bg-gray-800 p-4"
+              type="submit"
+            >
+              <span class="sr-only">Search</span>
+              <img src="/icon-arrow.svg" alt="" />
+            </button>
+          </div>
+        </form>
+
+        <ul
+          class="absolute top-[calc(100%+1rem)] mx-auto mt-4 grid w-full gap-4 rounded-xl bg-white p-6 text-center font-bold sm:grid-flow-col sm:text-left"
         >
-          <input
-            class="w-full p-4"
-            type="text"
-            name="query"
-            id="query"
-            placeholder="Search for any IP address or domain"
-          />
-          <button
-            class="absolute right-0 top-0 h-full bg-gray-800 p-4"
-            type="submit"
+          <li>
+            <p class="text-xs uppercase text-gray-400">IP address</p>
+            <p class="mt-1 text-lg">192.212.174.101</p>
+          </li>
+          <li
+            class="relative pl-6 before:left-0 before:top-1/2 before:h-5/6 before:w-[1px] before:-translate-y-1/2 before:bg-gray-400/50 sm:before:absolute"
+          >
+            <p class="text-xs uppercase text-gray-400">Location</p>
+            <p class="mt-1 text-lg">Brooklyn, NY 10001</p>
+          </li>
+          <li
+            class="relative pl-6 before:left-0 before:top-1/2 before:h-5/6 before:w-[1px] before:-translate-y-1/2 before:bg-gray-400/50 sm:before:absolute"
+          >
+            <p class="text-xs uppercase text-gray-400">Timezone</p>
+            <p class="mt-1 text-lg">UTC -05:00</p>
+          </li>
+          <li
+            class="relative pl-6 before:left-0 before:top-1/2 before:h-5/6 before:w-[1px] before:-translate-y-1/2 before:bg-gray-400/50 sm:before:absolute"
           >
-            <span class="sr-only">Search</span>
-            <img src="/icon-arrow.svg" alt="" />
-          </button>
-        </div>
-      </form>
+            <p class="text-xs uppercase text-gray-400">ISP</p>
+            <p class="mt-1 text-lg">SpaceX Starlink</p>
+          </li>
+        </ul>
+      </div>
     </header>
     <script type="module" src="/src/main.ts"></script>
   </body>