Add container, heading and basic search input

src/cryptometrics/components/content/Container.js

+import React from "react";
+
+function Container(props) {
+  return (
+    <div className="container mx-auto pt-8 p-2 sm:p-8 md:p-16">
+      {props.children}
+    </div>
+  );
+}
+
+export default Container;

src/cryptometrics/components/content/Main.js

+import React from "react";
+
+function Main(props) {
+  return (
+    <main className="flex flex-col flex-auto overflow-auto min-h-screen pl-0 transition-[padding] duration-200 dark:bg-dark-800">
+      {props.children}
+    </main>
+  );
+}
+
+export default Main;

src/cryptometrics/components/inputs/SearchInput.js

+import React from "react";
+import { SearchIcon } from "@heroicons/react/outline";
+
+function SearchInput() {
+  return (
+    <div className="relative">
+      <input
+        className="w-52 h-12 text-base font-semibold outline-none dark:text-white px-3 pr-10 rounded-2xl bg-dark-700"
+        placeholder="Search"
+        type="text"
+      ></input>
+      <button className="absolute top-0 right-3 bottom-0 w-6">
+        <SearchIcon className="w-6 h-6 dark:text-white" />
+      </button>
+    </div>
+  );
+}
+
+export default SearchInput;

src/cryptometrics/components/titles/BoldGradientHeading.js

+import React from "react";
+
+function BoldGradientHeading({ children }) {
+  return (
+    <h1 className="text-4xl font-extrabold font-poppins text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 to-blue-500">
+      {children}
+    </h1>
+  );
+}
+
+export default BoldGradientHeading;

src/cryptometrics/pages/index.js

 import Head from "next/head";
+import Container from "../components/content/Container";
+import Main from "../components/content/Main";
+import SearchInput from "../components/inputs/SearchInput";
+import BoldGradientHeading from "../components/titles/BoldGradientHeading";
 
 export default function Home() {
   return (
@@ -8,9 +12,14 @@ export default function Home() {
         <meta name="description" content="CryptoMetrics" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div className="text-4xl font-extrabold text-center mt-5">
-        CryptoMetrics
-      </div>
+      <Main>
+        <Container>
+          <div className="flex flex-row justify-between">
+            <BoldGradientHeading>CryptoMetrics</BoldGradientHeading>
+            <SearchInput />
+          </div>
+        </Container>
+      </Main>
     </div>
   );
 }