➕ Add: GitHub icon - top right

Author: manuarora700

src/components/Landing.js

@@ -213,6 +213,36 @@ const Landing = () => {
         draggable
         pauseOnHover
       />
+
+      <a
+        href="https://github.com/manuarora700/react-code-editor"
+        title="Fork me on GitHub"
+        class="github-corner"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <svg
+          width="50"
+          height="50"
+          viewBox="0 0 250 250"
+          className="relative z-20 h-20 w-20"
+        >
+          <title>Fork me on GitHub</title>
+          <path d="M0 0h250v250"></path>
+          <path
+            d="M127.4 110c-14.6-9.2-9.4-19.5-9.4-19.5 3-7 1.5-11 1.5-11-1-6.2 3-2 3-2 4 4.7 2 11 2 11-2.2 10.4 5 14.8 9 16.2"
+            fill="currentColor"
+            style={{ transformOrigin: "130px 110px" }}
+            class="octo-arm"
+          ></path>
+          <path
+            d="M113.2 114.3s3.6 1.6 4.7.6l15-13.7c3-2.4 6-3 8.2-2.7-8-11.2-14-25 3-41 4.7-4.4 10.6-6.4 16.2-6.4.6-1.6 3.6-7.3 11.8-10.7 0 0 4.5 2.7 6.8 16.5 4.3 2.7 8.3 6 12 9.8 3.3 3.5 6.7 8 8.6 12.3 14 3 16.8 8 16.8 8-3.4 8-9.4 11-11.4 11 0 5.8-2.3 11-7.5 15.5-16.4 16-30 9-40 .2 0 3-1 7-5.2 11l-13.3 11c-1 1 .5 5.3.8 5z"
+            fill="currentColor"
+            class="octo-body"
+          ></path>
+        </svg>
+      </a>
+
       <div className="h-4 w-full bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500"></div>
       <div className="flex flex-row">
         <div className="px-4 py-2">

src/index.css

@@ -21,3 +21,26 @@ body {
   background: #e2e8f0;
   cursor: pointer;
 }
+
+.github-corner svg {
+  position:absolute;
+  right:0;
+  top:0;
+  mix-blend-mode:darken;
+  color:#ffffff;
+  fill:#000000;
+}
+.github-corner:hover .octo-arm {
+  animation:octocat-wave .56s;
+}
+@keyframes octocat-wave {
+  0%, 100% {
+    transform:rotate(0);
+  }
+  20%, 60% { 
+    transform:rotate(-20deg);
+  
+  } 40%, 80% {
+    transform:rotate(10deg);
+  }
+}