From e3320a1032b190b0ae0be9c95492b7e0854042d7 Mon Sep 17 00:00:00 2001
From: Abhii <abhishekhsharma2002@gmail.com>
Date: Thu, 10 Oct 2024 16:27:13 +0530
Subject: [PATCH] fixed left sidebar

---
 css/output.css | 186 +++++++-------
 index.html     | 665 ++++++++++++++++++++++++++++++++-----------------
 2 files changed, 529 insertions(+), 322 deletions(-)

diff --git a/css/output.css b/css/output.css
index 10c9ab9..6234bd7 100644
--- a/css/output.css
+++ b/css/output.css
@@ -22,7 +22,7 @@
 
 ::before,
 ::after {
-  --tw-content: '';
+  --tw-content: "";
 }
 
 /*
@@ -44,9 +44,10 @@ html,
   -moz-tab-size: 4;
   /* 3 */
   -o-tab-size: 4;
-     tab-size: 4;
+  tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
@@ -89,7 +90,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
 
 abbr:where([title]) {
   -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
+  text-decoration: underline dotted;
 }
 
 /*
@@ -135,7 +136,8 @@ code,
 kbd,
 samp,
 pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
   /* 1 */
   font-feature-settings: normal;
   /* 2 */
@@ -234,9 +236,9 @@ select {
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+[type="button"],
+[type="reset"],
+[type="submit"] {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -283,7 +285,7 @@ Correct the cursor style of increment and decrement buttons in Safari.
 2. Correct the outline style in Safari.
 */
 
-[type='search'] {
+[type="search"] {
   -webkit-appearance: textfield;
   /* 1 */
   outline-offset: -2px;
@@ -376,7 +378,8 @@ textarea {
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
 
-input::-moz-placeholder, textarea::-moz-placeholder {
+input::-moz-placeholder,
+textarea::-moz-placeholder {
   opacity: 1;
   /* 1 */
   color: #9ca3af;
@@ -444,7 +447,9 @@ video {
   display: none;
 }
 
-*, ::before, ::after {
+*,
+::before,
+::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -454,19 +459,19 @@ video {
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
+  --tw-gradient-from-position: ;
+  --tw-gradient-via-position: ;
+  --tw-gradient-to-position: ;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
   --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -474,24 +479,24 @@ video {
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
 }
 
 ::backdrop {
@@ -504,19 +509,19 @@ video {
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
+  --tw-gradient-from-position: ;
+  --tw-gradient-via-position: ;
+  --tw-gradient-to-position: ;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
   --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -524,28 +529,39 @@ video {
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
 }
 
 .container {
   width: 100%;
+  position: relative;
+  align-items: start;
+  flex-direction: row;
+}
+
+.left-sidebar {
+  width: 40%;
+  padding: 0 16px;
+  position: sticky;
+  top: 0;
+  left: 0;
 }
 
 @media (min-width: 640px) {
@@ -792,8 +808,6 @@ video {
   background-color: rgb(22 24 28 / var(--tw-bg-opacity));
 }
 
-
-
 .bg-\[\#1d9bf0\] {
   --tw-bg-opacity: 1;
   background-color: rgb(29 155 240 / var(--tw-bg-opacity));
@@ -809,7 +823,6 @@ video {
   background-color: rgb(26 140 216 / var(--tw-bg-opacity));
 }
 
-
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -830,7 +843,6 @@ video {
   background-color: rgb(22 101 52 / var(--tw-bg-opacity));
 }
 
-
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -948,7 +960,9 @@ video {
 
 .invert {
   --tw-invert: invert(100%);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
+    var(--tw-sepia) var(--tw-drop-shadow);
 }
 
 .transition-all {
@@ -994,7 +1008,6 @@ video {
   background-color: rgb(10, 102, 194 / var(--tw-bg-opacity));
 }
 
-
 .hover\:bg-green-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
@@ -1039,7 +1052,6 @@ video {
   text-decoration-line: underline;
 }
 
-
 .transform {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
@@ -1048,22 +1060,22 @@ video {
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
-  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-
 .transition {
-  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: background-color, border-color, color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
-
 .duration-300 {
   transition-duration: 300ms;
 }
 
-
 .hover\:scale-105:hover {
   --tw-scale-x: 1.05;
   --tw-scale-y: 1.05;
@@ -1071,14 +1083,14 @@ video {
 }
 
 .hover\:scale-110:hover {
-  --tw-scale-x: 1.10;
-  --tw-scale-y: 1.10;
+  --tw-scale-x: 1.1;
+  --tw-scale-y: 1.1;
   transform: scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-
 .hover\:shadow-lg:hover {
-  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
   box-shadow: var(--tw-shadow);
 }
 
diff --git a/index.html b/index.html
index 6f4f8a3..9333d6f 100644
--- a/index.html
+++ b/index.html
@@ -1,260 +1,455 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Home / X</title>
-    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
-    <link rel="stylesheet" href="css/output.css">
-</head>
-<body class="bg-black text-white">
-    <div class="flex container mx-auto">
-        <div class="first w-[50%] space-y-3">
-            <div class="invert logo mx-5 my-3">
-                <svg viewBox="0 0 24 24" aria-hidden="true" class="w-8  r-4qtqp9 r-yyyyoo r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-lrsllp r-1nao33i r-16y2uox r-8kz0gk"><g><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g></svg>
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
+    />
+    <link rel="stylesheet" href="css/output.css" />
+  </head>
+  <body class="bg-black min-h-screen text-white">
+    <div class="flex flex-row container mx-auto">
+      <div class="left-sidebar h-full">
+        <div class="flex justify-between flex-col h-full">
+          <div>
+            <div class="invert logo mx-5 my-3 w-full">
+              <svg
+                viewBox="0 0 24 24"
+                aria-hidden="true"
+                class="w-8 r-4qtqp9 r-yyyyoo r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-lrsllp r-1nao33i r-16y2uox r-8kz0gk"
+              >
+                <g>
+                  <path
+                    d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+                  ></path>
+                </g>
+              </svg>
             </div>
-            <div class="sidebar">
-                
-                <ul class="flex flex-col text-xl font-bold">
-                    <li class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-3 hover:rounded-full transition-all"><span class="material-symbols-outlined text-3xl">home</span>Home</li>
-                    <li class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-3 hover:rounded-full transition-all"><span class="material-symbols-outlined text-3xl">search</span>Explore</li>
-                    <li class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-3 hover:rounded-full transition-all"><span class="material-symbols-outlined text-3xl">notifications</span>Notifications</li>
-                    <li class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-3 hover:rounded-full transition-all"><span class="material-symbols-outlined text-3xl">email</span>Messages</li>
-                    <li class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-3 hover:rounded-full transition-all"><span class="material-symbols-outlined text-3xl">chat</span>Grok</li>
-                    <li class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-3 hover:rounded-full transition-all"><span class="material-symbols-outlined text-3xl">lists</span>Lists</li>
-                    <li class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-3 hover:rounded-full transition-all"><span class="material-symbols-outlined text-3xl">bookmarks</span>Premium</li>
-                    <li class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-3 hover:rounded-full transition-all"><span class="material-symbols-outlined text-3xl">person</span><a href="profile.html">Profile</a></li>
-                    <li class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-3 hover:rounded-full transition-all"><span class="material-symbols-outlined text-3xl">more</span>More</li>
-                    <li class="flex items-center gap-3 w-fit  cursor-pointer py-3">
-                            <button class=" bg-[#1d9bf0] hover:bg-[#1a8cd8] px-24 py-4 rounded-full">Post</button>
-                    </li>
-                    <li class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer p-4 hover:rounded-full transition-all">
-                            <img class="rounded-full" src="dp.jpg" alt="...">
-                        <a href="profile.html">
-                            <div class="aboutitem">
-                                <div class="font-bold">Abhrajit Gupta</div>
-                                <div class="text-sm text-gray-500">@abhrajit_gupta</div>
-                            </div>   
-                        </a>             
-                    </li>
-                </ul>
+            <div class="sidebar w-full">
+              <ul class="flex flex-col text-xl font-medium">
+                <li
+                  class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-3 hover:rounded-full transition-all"
+                >
+                  <span class="material-symbols-outlined text-3xl">home</span
+                  >Home
+                </li>
+                <li
+                  class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-2 hover:rounded-full transition-all"
+                >
+                  <span class="material-symbols-outlined text-3xl">search</span
+                  >Explore
+                </li>
+                <li
+                  class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-2 hover:rounded-full transition-all"
+                >
+                  <span class="material-symbols-outlined text-3xl"
+                    >notifications</span
+                  >Notifications
+                </li>
+                <li
+                  class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-2 hover:rounded-full transition-all"
+                >
+                  <span class="material-symbols-outlined text-3xl">email</span
+                  >Messages
+                </li>
+                <li
+                  class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-2 hover:rounded-full transition-all"
+                >
+                  <span class="material-symbols-outlined text-3xl">chat</span
+                  >Grok
+                </li>
+                <li
+                  class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-2 hover:rounded-full transition-all"
+                >
+                  <span class="material-symbols-outlined text-3xl">lists</span
+                  >Lists
+                </li>
+                <li
+                  class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-2 hover:rounded-full transition-all"
+                >
+                  <span class="material-symbols-outlined text-3xl"
+                    >bookmarks</span
+                  >Premium
+                </li>
+                <li
+                  class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-2 hover:rounded-full transition-all"
+                >
+                  <span class="material-symbols-outlined text-3xl">person</span
+                  ><a href="profile.html">Profile</a>
+                </li>
+                <li
+                  class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer px-5 py-2 hover:rounded-full transition-all"
+                >
+                  <span class="material-symbols-outlined text-3xl">more</span
+                  >More
+                </li>
+                <li class="flex items-center gap-3 w-full cursor-pointer p-3">
+                  <button
+                    class="bg-[#1d9bf0] hover:bg-[#1a8cd8] px224 py-4 rounded-full w-full p-3"
+                  >
+                    Post
+                  </button>
+                </li>
+              </ul>
             </div>
+          </div>
+          <div class="p-4 w-full">
+            <div
+              class="flex items-center gap-3 hover:bg-gray-900 cursor-pointer p-3 w-full hover:rounded-full transition-all"
+            >
+              <img class="rounded-full size-8" src="dp.jpg" alt="..." />
+              <a href="profile.html">
+                <div class="aboutitem">
+                  <div class="font-medium text-md">Abhrajit Gupta</div>
+                  <div class="text-sm text-gray-500">@abhrajit_gupta</div>
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="second w-full border-[1px] border-x-[#2f3336] border-y-[#2f3336]"
+      >
+        <div class="top flex p-3 relative cursor-pointer">
+          <div
+            class="absolute w-16 h-1 bottom-0 bg-[#1d9bf0] left-[19%] rounded-full z-10"
+          ></div>
+          <div class="left bg-red-1 w-1/2 flex justify-center font-bold">
+            For you
+          </div>
+          <div class="right bg-green-4001 w-1/2 flex justify-center font-bold">
+            Following
+          </div>
+          <div class="settings mx-2">
+            <span
+              class="material-symbols-outlined transform transition duration-300 hover:scale-110 hover:shadow-lg"
+            >
+              settings
+            </span>
+          </div>
+        </div>
+        <hr class="border-x-[#2f3336] border-y-[#2f3336]" />
+        <div class="whatishap flex gap-4 my-3">
+          <div class="img m-3">
+            <img class="rounded-full" src="dp.jpg" alt="" />
+          </div>
+          <div class="w-full">
+            <input
+              class="w-full bg-black h-7 my-4 text-white outline-none text-xl"
+              type="text"
+              placeholder="What is happening?!"
+            />
+            <div
+              class="text-[#1d9bf0] flex items-center gap-2 font-medium my-4"
+            >
+              <span class="material-symbols-outlined"> globe_asia </span>
+              <span class="cursor-pointer">Everyone can reply</span>
+            </div>
+            <div class="w-[90%] h-[1px] bg-[#2f3336] my-3"></div>
+            <div class="blueicons flex gap-1 text-[#1d9bf0] items-center">
+              <span
+                class="material-symbols-outlined cursor-pointer hover:bg-blue-600 hover:rounded-full w-fit flex p-1 items-center transition-all ease-in-out"
+              >
+                image
+              </span>
+              <span
+                class="material-symbols-outlined cursor-pointer hover:bg-blue-600 hover:rounded-full w-fit flex p-1 items-center transition-all ease-in-out"
+              >
+                gif
+              </span>
+              <span
+                class="material-symbols-outlined cursor-pointer hover:bg-blue-600 hover:rounded-full w-fit flex p-1 items-center transition-all ease-in-out"
+              >
+                ballot
+              </span>
+              <span
+                class="material-symbols-outlined cursor-pointer hover:bg-blue-600 hover:rounded-full w-fit flex p-1 items-center transition-all ease-in-out"
+              >
+                mood
+              </span>
+              <span
+                class="material-symbols-outlined cursor-pointer hover:bg-blue-600 hover:rounded-full w-fit flex p-1 items-center transition-all ease-in-out"
+              >
+                calendar_month
+              </span>
+              <span
+                class="material-symbols-outlined cursor-pointer hover:bg-blue-600 hover:rounded-full w-fit flex p-1 items-center transition-all ease-in-out"
+              >
+                location_on
+              </span>
+              <span class="cursor-pointer">
+                <button
+                  class="text-white w-fit bg-[#1d9bf0] hover:bg-[#1a8cd8] px-7 py-2 rounded-full font-bold"
+                >
+                  Post
+                </button>
+              </span>
+            </div>
+          </div>
         </div>
-        <div class="second w-full border-[1px] border-x-[#2f3336] border-y-[#2f3336]">
-            <div class="top flex p-3 relative cursor-pointer">
-                <div class="absolute w-16 h-1 bottom-0  bg-[#1d9bf0] left-[19%] rounded-full z-10"></div>
-                <div class="left bg-red-1 w-1/2 flex justify-center font-bold  ">For you</div>
-                <div class="right bg-green-4001 w-1/2 flex justify-center font-bold ">Following</div>
-                <div class="settings mx-2">
-                    <span class="material-symbols-outlined transform transition duration-300 hover:scale-110 hover:shadow-lg">
-                        settings
+        <hr class="border-x-[#2f3336] border-y-[#2f3336]" />
+        <div class="posts">
+          <div class="post">
+            <div class="flex">
+              <div class="image m-3">
+                <img class="rounded-full w-32" src="item2.jpg" alt="..." />
+              </div>
+              <div class="content my-3">
+                <div class="profile-info flex gap-1">
+                  <span class="font-bold hover:underline cursor-pointer"
+                    >Shah Rukh Khan</span
+                  >
+                  <span class="material-symbols-outlined text-[#1d9bf0]"
+                    >verified</span
+                  >
+                  <span class="text-gray-500 font-medium"> @iamsrk · 9h</span>
+                </div>
+                <div>
+                  Wishing you all a very Happy Republic Day…. May the Tiranga
+                  always fly high, symbolising the unity, strength and pride of
+                  our nation. As Indians, let&apos;s contribute towards the
+                  progress and prosperity of our country. Jai Hind!
+                </div>
+                <div class="postimg cursor-pointer">
+                  <img
+                    class="w-[96%] rounded-xl my-2"
+                    src="sample.jpeg"
+                    alt="..."
+                  />
+                </div>
+                <div class="icons flex mx-2 justify-around text-gray-600">
+                  <div
+                    class="icon flex items-center justify-center cursor-pointer hover:text-blue-600 transition-all"
+                  >
+                    <span
+                      class="material-symbols-outlined w-[70%] hover:bg-blue-600 hover:text-blue-300 hover:rounded-full flex p-1 items-center transition-all"
+                    >
+                      chat_bubble </span
+                    >1.5K
+                  </div>
+                  <div
+                    class="icon flex items-center justify-center cursor-pointer hover:text-green-600 transition-all"
+                  >
+                    <span
+                      class="material-symbols-outlined w-[70%] hover:bg-green-600 hover:text-green-300 hover:rounded-full flex p-1 items-center transition-all"
+                    >
+                      repeat </span
+                    >6.3K
+                  </div>
+                  <div
+                    class="icon flex items-center justify-center cursor-pointer hover:text-pink-600 transition-all"
+                  >
+                    <span
+                      class="material-symbols-outlined w-[70%] hover:bg-pink-600 hover:text-pink-300 hover:rounded-full flex p-1 items-center transition-all"
+                    >
+                      favorite </span
+                    >54K
+                  </div>
+                  <div
+                    class="icon flex items-center justify-center cursor-pointer hover:text-blue-600 transition-all"
+                  >
+                    <span
+                      class="material-symbols-outlined w-[70%] hover:bg-blue-600 hover:text-blue-300 hover:rounded-full flex p-1 items-center transition-all"
+                    >
+                      bar_chart </span
+                    >791K
+                  </div>
+                  <div
+                    class="icon flex items-center justify-center cursor-pointer transition-all"
+                  >
+                    <span
+                      class="material-symbols-outlined w-[70%] hover:text-blue-300 hover:rounded-full flex items-center transition-all"
+                    >
+                      bookmark
                     </span>
+                  </div>
+                  <div
+                    class="icon flex items-center justify-center cursor-pointer transition-all"
+                  >
+                    <span
+                      class="material-symbols-outlined w-[70%] hover:text-blue-300 hover:rounded-full flex p-1 items-center transition-all"
+                    >
+                      iOS_share
+                    </span>
+                  </div>
                 </div>
+              </div>
             </div>
-            <hr class="border-x-[#2f3336] border-y-[#2f3336]">
-            <div class="whatishap flex gap-4 my-3">
-                <div class="img m-3">
-                    <img class="rounded-full" src="dp.jpg" alt="">
+          </div>
+          <hr class="border-x-[#2f3336] border-y-[#2f3336]" />
+          <div class="post">
+            <div class="flex">
+              <div class="image m-3">
+                <img class="rounded-full" src="item5.jpg" alt="..." />
+              </div>
+              <div class="content my-3">
+                <div class="profile-info flex gap-1">
+                  <span class="font-bold hover:underline cursor-pointer"
+                    >Daniel Cranney</span
+                  >
+                  <span class="material-symbols-outlined text-[#1d9bf0]"
+                    >verified</span
+                  >
+                  <span class="text-gray-500 font-medium">
+                    @danielcranney · 14h</span
+                  >
                 </div>
-                <div class="w-full">
-                    <input class="w-full bg-black h-7 my-4 text-white outline-none text-xl" type="text" placeholder="What is happening?!">
-                    <div class="text-[#1d9bf0] flex items-center gap-2 font-medium my-4">
-                        <span class="material-symbols-outlined">
-                            globe_asia
-                        </span>
-                        <span class="cursor-pointer">Everyone can reply</span>
-                    </div>
-                    <div class="w-[90%] h-[1px] bg-[#2f3336] my-3"></div>
-                    <div class="blueicons flex gap-1 text-[#1d9bf0] items-center">
-                            <span class="material-symbols-outlined cursor-pointer hover:bg-blue-600 hover:rounded-full w-fit flex p-1 items-center transition-all ease-in-out">
-                                image
-                            </span>
-                            <span class="material-symbols-outlined cursor-pointer hover:bg-blue-600 hover:rounded-full w-fit flex p-1 items-center transition-all ease-in-out">
-                                gif
-                            </span>
-                            <span class="material-symbols-outlined cursor-pointer hover:bg-blue-600 hover:rounded-full w-fit flex p-1 items-center transition-all ease-in-out">
-                                ballot
-                            </span>
-                            <span class="material-symbols-outlined cursor-pointer hover:bg-blue-600 hover:rounded-full w-fit flex p-1 items-center transition-all ease-in-out">
-                                mood
-                            </span>
-                            <span class="material-symbols-outlined cursor-pointer hover:bg-blue-600 hover:rounded-full w-fit flex p-1 items-center transition-all ease-in-out">
-                                calendar_month
-                            </span>
-                            <span class="material-symbols-outlined cursor-pointer hover:bg-blue-600 hover:rounded-full w-fit flex p-1 items-center transition-all ease-in-out">
-                                location_on
-                            </span>
-                            <span class="cursor-pointer">
-                                <button class="text-white w-fit bg-[#1d9bf0] hover:bg-[#1a8cd8]  px-7 py-2 rounded-full font-bold">Post</button>
-                            </span>
-                    </div>
+                <div>
+                  Developers, I&apos;m not the only one who thinks HTML could be
+                  more readable, right? 🤔
                 </div>
-            </div>
-            <hr class="border-x-[#2f3336] border-y-[#2f3336]">
-            <div class="posts">
-                <div class="post">
-                    <div class="flex">
-                        <div class="image m-3">
-                            <img class="rounded-full w-32" src="item2.jpg" alt="...">
-                        </div>
-                        <div class="content my-3">
-                            <div class="profile-info flex gap-1">
-                                <span class="font-bold hover:underline cursor-pointer">Shah Rukh Khan</span>
-                                <span class="material-symbols-outlined text-[#1d9bf0]">verified</span> 
-                                <span class="text-gray-500 font-medium"> @iamsrk · 9h</span>
-                            </div>
-                            <div>Wishing you all a very Happy Republic Day…. May the Tiranga always fly high, symbolising the unity, strength and pride of our nation. As Indians, let&apos;s contribute towards the progress and prosperity of our country. Jai Hind!</div>
-                            <div class="postimg cursor-pointer">
-                                <img class="w-[96%] rounded-xl my-2" src="sample.jpeg" alt="...">
-                            </div>
-                            <div class="icons flex mx-2 justify-around text-gray-600">
-                                <div class="icon flex items-center justify-center cursor-pointer hover:text-blue-600  transition-all">
-                                    <span class="material-symbols-outlined w-[70%] hover:bg-blue-600 hover:text-blue-300 hover:rounded-full flex p-1 items-center transition-all">
-                                        chat_bubble
-                                    </span>1.5K
-                                </div>
-                                <div class="icon flex items-center justify-center cursor-pointer hover:text-green-600 transition-all">
-                                    <span class="material-symbols-outlined w-[70%] hover:bg-green-600 hover:text-green-300 hover:rounded-full flex p-1 items-center transition-all">
-                                        repeat
-                                    </span>6.3K
-                                </div>
-                                <div  class="icon flex items-center justify-center cursor-pointer hover:text-pink-600 transition-all">
-                                    <span class="material-symbols-outlined w-[70%] hover:bg-pink-600 hover:text-pink-300 hover:rounded-full flex p-1 items-center transition-all">
-                                        favorite
-                                    </span>54K
-                                </div>
-                                <div  class="icon flex items-center justify-center cursor-pointer hover:text-blue-600 transition-all">
-                                    <span class="material-symbols-outlined w-[70%] hover:bg-blue-600 hover:text-blue-300 hover:rounded-full flex p-1 items-center transition-all">
-                                        bar_chart
-                                    </span>791K
-                                </div>
-                                <div  class="icon flex items-center justify-center cursor-pointer transition-all">
-                                    <span class="material-symbols-outlined w-[70%]  hover:text-blue-300 hover:rounded-full flex items-center transition-all">
-                                        bookmark
-                                    </span>
-                                </div>
-                                <div  class="icon flex items-center justify-center cursor-pointer transition-all">
-                                    <span class="material-symbols-outlined w-[70%] hover:text-blue-300 hover:rounded-full flex p-1 items-center transition-all">
-                                        iOS_share
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                <div class="postimg cursor-pointer">
+                  <img
+                    class="w-[96%] rounded-xl my-2"
+                    src="sample2.jpeg"
+                    alt="..."
+                  />
                 </div>
-                <hr class="border-x-[#2f3336] border-y-[#2f3336]">
-                <div class="post">
-                    <div class="flex">
-                        <div class="image m-3">
-                            <img class="rounded-full" src="item5.jpg" alt="...">
-                        </div>
-                        <div class="content my-3">
-                            <div class="profile-info flex gap-1">
-                                <span class="font-bold hover:underline cursor-pointer">Daniel Cranney</span>
-                                <span class="material-symbols-outlined text-[#1d9bf0]">verified</span> 
-                                <span class="text-gray-500 font-medium"> @danielcranney · 14h</span>
-                            </div>
-                            <div>Developers, I&apos;m not the only one who thinks HTML could be more readable, right? 🤔</div>
-                            <div class="postimg cursor-pointer">
-                                <img class="w-[96%] rounded-xl my-2" src="sample2.jpeg" alt="...">
-                            </div>
-                            <div class="icons flex mx-2 justify-around text-gray-600">
-                                <div class="icon flex items-center justify-center cursor-pointer hover:text-blue-600  transition-all">
-                                    <span class="material-symbols-outlined w-[70%] hover:bg-blue-600 hover:text-blue-300 hover:rounded-full flex p-1 items-center transition-all">
-                                        chat_bubble
-                                    </span>1.5K
-                                </div>
-                                <div class="icon flex items-center justify-center cursor-pointer hover:text-green-600 transition-all">
-                                    <span class="material-symbols-outlined w-[70%] hover:bg-green-600 hover:text-green-300 hover:rounded-full flex p-1 items-center transition-all">
-                                        repeat
-                                    </span>6.3K
-                                </div>
-                                <div  class="icon flex items-center justify-center cursor-pointer hover:text-pink-600 transition-all">
-                                    <span class="material-symbols-outlined w-[70%] hover:bg-pink-600 hover:text-pink-300 hover:rounded-full flex p-1 items-center transition-all">
-                                        favorite
-                                    </span>54K
-                                </div>
-                                <div  class="icon flex items-center justify-center cursor-pointer hover:text-blue-600 transition-all">
-                                    <span class="material-symbols-outlined w-[70%] hover:bg-blue-600 hover:text-blue-300 hover:rounded-full flex p-1 items-center transition-all">
-                                        bar_chart
-                                    </span>791K
-                                </div>
-                                <div  class="icon flex items-center justify-center cursor-pointer transition-all">
-                                    <span class="material-symbols-outlined w-[70%]  hover:text-blue-300 hover:rounded-full flex items-center transition-all">
-                                        bookmark
-                                    </span>
-                                </div>
-                                <div  class="icon flex items-center justify-center cursor-pointer transition-all">
-                                    <span class="material-symbols-outlined w-[70%] hover:text-blue-300 hover:rounded-full flex p-1 items-center transition-all">
-                                        iOS_share
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                <div class="icons flex mx-2 justify-around text-gray-600">
+                  <div
+                    class="icon flex items-center justify-center cursor-pointer hover:text-blue-600 transition-all"
+                  >
+                    <span
+                      class="material-symbols-outlined w-[70%] hover:bg-blue-600 hover:text-blue-300 hover:rounded-full flex p-1 items-center transition-all"
+                    >
+                      chat_bubble </span
+                    >1.5K
+                  </div>
+                  <div
+                    class="icon flex items-center justify-center cursor-pointer hover:text-green-600 transition-all"
+                  >
+                    <span
+                      class="material-symbols-outlined w-[70%] hover:bg-green-600 hover:text-green-300 hover:rounded-full flex p-1 items-center transition-all"
+                    >
+                      repeat </span
+                    >6.3K
+                  </div>
+                  <div
+                    class="icon flex items-center justify-center cursor-pointer hover:text-pink-600 transition-all"
+                  >
+                    <span
+                      class="material-symbols-outlined w-[70%] hover:bg-pink-600 hover:text-pink-300 hover:rounded-full flex p-1 items-center transition-all"
+                    >
+                      favorite </span
+                    >54K
+                  </div>
+                  <div
+                    class="icon flex items-center justify-center cursor-pointer hover:text-blue-600 transition-all"
+                  >
+                    <span
+                      class="material-symbols-outlined w-[70%] hover:bg-blue-600 hover:text-blue-300 hover:rounded-full flex p-1 items-center transition-all"
+                    >
+                      bar_chart </span
+                    >791K
+                  </div>
+                  <div
+                    class="icon flex items-center justify-center cursor-pointer transition-all"
+                  >
+                    <span
+                      class="material-symbols-outlined w-[70%] hover:text-blue-300 hover:rounded-full flex items-center transition-all"
+                    >
+                      bookmark
+                    </span>
+                  </div>
+                  <div
+                    class="icon flex items-center justify-center cursor-pointer transition-all"
+                  >
+                    <span
+                      class="material-symbols-outlined w-[70%] hover:text-blue-300 hover:rounded-full flex p-1 items-center transition-all"
+                    >
+                      iOS_share
+                    </span>
+                  </div>
                 </div>
-                <hr class="border-x-[#2f3336] border-y-[#2f3336]">
+              </div>
             </div>
+          </div>
+          <hr class="border-x-[#2f3336] border-y-[#2f3336]" />
         </div>
+      </div>
 
-        <div class="third">
-            <div class="search flex justify-center mx-6 my-3">
-                <input type="text" class="rounded-full bg-[#16181c] px-4 py-2 w-96" placeholder="Search">
-            </div>
-            <!-- <div class="premium bg-gray-800 w-96 flex flex-col px-4 py-2 m-auto rounded-xl gap-2">
+      <div class="third">
+        <div class="search flex justify-center mx-6 my-3">
+          <input
+            type="text"
+            class="rounded-full bg-[#16181c] px-4 py-2 w-96"
+            placeholder="Search"
+          />
+        </div>
+        <!-- <div class="premium bg-gray-800 w-96 flex flex-col px-4 py-2 m-auto rounded-xl gap-2">
                 <h1 class="font-bold text-2xl">Subscribe to Premium</h1>
                 <div>Subscribe to unlock new features and if eligible, receive a share of ads revenue.</div>
                 <button class="btn bg-blue-500 w-fit px-4 py-2 rounded-full font-bold my-1 hover:bg-blue-600">Subscribe</button>
             </div> -->
-            <div class="whats bg-[#16181c] rounded-xl my-3 mx-6 w-96">
-                <h1 class="text-xl font-bold p-3">What's happening</h1>
-                <div class="item px-4 p-3 hover:bg-gray-700 cursor-pointer transition-all">
-                    <div class="font-bold text-sm text-gray-500">Trending in India</div>
-                    <div class="font-bold">#RepublicDayAtNSEC</div>
-                    <div class="font-bold text-sm text-gray-500">2M posts</div>
-                </div>
-                <div class="item px-4 p-3 hover:bg-gray-700 cursor-pointer transition-all">
-                    <div class="font-bold text-sm text-gray-500">Trending in India</div>
-                    <div class="font-bold">#AnimalOnNetflix</div>
-                    <div class="font-bold text-sm text-gray-500">900K posts</div>
-                </div> 
-                <div class="item px-4 p-3 hover:bg-gray-700 cursor-pointer transition-all">
-                    <div class="font-bold text-sm text-gray-500">Trending in India</div>
-                    <div class="font-bold">#Orry</div>
-                    <div class="font-bold text-sm text-gray-500">700K posts</div>
-                </div>
-                <div class="item px-4 p-3 hover:bg-gray-700 cursor-pointer transition-all">
-                    <div class="font-bold text-sm text-gray-500">Trending in India</div>
-                    <div class="font-bold">#Fighter</div>
-                    <div class="font-bold text-sm text-gray-500">600K posts</div>
-                </div>
-                <div class="item px-4 p-3 hover:bg-gray-700 cursor-pointer transition-all">
-                    <div class="font-bold text-sm text-gray-500">Trending in India</div>
-                    <div class="font-bold">#SigmaCourse</div>
-                    <div class="font-bold text-sm text-gray-500">500K posts</div>
-                </div>
-                <div class="item px-4 p-3 hover:bg-gray-700 cursor-pointer hover:rounded-xl transition-all">
-                    <div class="text-blue-400 hover:underline ">Show more</div>
-                </div>
-            </div>
-            <div class="who bg-[#16181c] rounded-xl my-3 mx-6 w-96">
-                <h1 class="text-xl font-bold p-3">Who to follow</h1>
-                <div class="item px-4 p-3 hover:bg-gray-700 cursor-pointer flex transition-all">
-                    <img class="rounded-full" src="item1.jpg" alt="...">
-                    <div class="aboutitem mx-3">
-                        <div class="font-bold">Neeraj Walia</div>
-                        <div class="text-sm text-gray-500">@ezSnippet</div>
-                    </div>                
-                    <!-- <button class="bg-white text-black font-medium rounded-full w-24 mx-8">Follow</button> -->
-                </div>
-
-                <div class="item px-4 p-3 hover:bg-gray-700 cursor-pointer hover:rounded-xl transition-all">
-                    <div class="text-blue-400 hover:underline">Show more</div>
-                </div>
+        <div class="whats bg-[#16181c] rounded-xl my-3 mx-6 w-96">
+          <h1 class="text-xl font-bold p-3">What's happening</h1>
+          <div
+            class="item px-4 p-3 hover:bg-gray-700 cursor-pointer transition-all"
+          >
+            <div class="font-bold text-sm text-gray-500">Trending in India</div>
+            <div class="font-bold">#RepublicDayAtNSEC</div>
+            <div class="font-bold text-sm text-gray-500">2M posts</div>
+          </div>
+          <div
+            class="item px-4 p-3 hover:bg-gray-700 cursor-pointer transition-all"
+          >
+            <div class="font-bold text-sm text-gray-500">Trending in India</div>
+            <div class="font-bold">#AnimalOnNetflix</div>
+            <div class="font-bold text-sm text-gray-500">900K posts</div>
+          </div>
+          <div
+            class="item px-4 p-3 hover:bg-gray-700 cursor-pointer transition-all"
+          >
+            <div class="font-bold text-sm text-gray-500">Trending in India</div>
+            <div class="font-bold">#Orry</div>
+            <div class="font-bold text-sm text-gray-500">700K posts</div>
+          </div>
+          <div
+            class="item px-4 p-3 hover:bg-gray-700 cursor-pointer transition-all"
+          >
+            <div class="font-bold text-sm text-gray-500">Trending in India</div>
+            <div class="font-bold">#Fighter</div>
+            <div class="font-bold text-sm text-gray-500">600K posts</div>
+          </div>
+          <div
+            class="item px-4 p-3 hover:bg-gray-700 cursor-pointer transition-all"
+          >
+            <div class="font-bold text-sm text-gray-500">Trending in India</div>
+            <div class="font-bold">#SigmaCourse</div>
+            <div class="font-bold text-sm text-gray-500">500K posts</div>
+          </div>
+          <div
+            class="item px-4 p-3 hover:bg-gray-700 cursor-pointer hover:rounded-xl transition-all"
+          >
+            <div class="text-blue-400 hover:underline">Show more</div>
+          </div>
+        </div>
+        <div class="who bg-[#16181c] rounded-xl my-3 mx-6 w-96">
+          <h1 class="text-xl font-bold p-3">Who to follow</h1>
+          <div
+            class="item px-4 p-3 hover:bg-gray-700 cursor-pointer flex transition-all"
+          >
+            <img class="rounded-full" src="item1.jpg" alt="..." />
+            <div class="aboutitem mx-3">
+              <div class="font-bold">Neeraj Walia</div>
+              <div class="text-sm text-gray-500">@ezSnippet</div>
             </div>
+            <!-- <button class="bg-white text-black font-medium rounded-full w-24 mx-8">Follow</button> -->
+          </div>
 
+          <div
+            class="item px-4 p-3 hover:bg-gray-700 cursor-pointer hover:rounded-xl transition-all"
+          >
+            <div class="text-blue-400 hover:underline">Show more</div>
+          </div>
         </div>
+      </div>
     </div>
-</body>
+  </body>
 </html>