Glassmorphism_Social_Media_Layout_Component

<div class="min-h-screen bg-gradient-to-br from-purple-500 to-indigo-700 dark:from-gray-900 dark:to-gray-800 text-white p-4 font-sans">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-4">

    <!-- Left Sidebar -->
    <aside class="md:col-span-1 p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg">
      <div class="flex items-center space-x-3 mb-6">
        <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
        <h1 class="text-xl font-bold text-shadow-sm">GlowNet</h1>
      </div>
      <nav class="space-y-4">
        <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
          <span>Home</span>
        </a>
        <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
          <span>Messages</span>
        </a>
        <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
          <span>Notifications</span>
        </a>
        <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Profile</span>
        </a>
        <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.942 3.33.833 2.35 2.35a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.942 1.543-.833 3.33-2.35 2.35a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.942-3.33-.833-2.35-2.35a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.942-1.543.833-3.33 2.35-2.35a1.724 1.724 0 002.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
          <span>Settings</span>
        </a>
      </nav>
      <button class="mt-8 w-full py-2 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 rounded-lg font-semibold transition-colors duration-300 shadow-md">
        Post
      </button>
    </aside>

    <!-- Main Content Area -->
    <main class="md:col-span-3 lg:col-span-3 space-y-4">

      <!-- Search Bar and Profile -->
      <div class="flex flex-col sm:flex-row items-center justify-between p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg">
        <div class="relative w-full sm:w-2/3 mb-4 sm:mb-0">
          <input type="text" placeholder="Search for posts, people..." class="w-full p-3 pl-10 rounded-lg bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-40 border border-white border-opacity-30 dark:border-gray-600 focus:outline-none focus:ring-1 focus:ring-purple-400 placeholder-white placeholder-opacity-70 dark:placeholder-gray-300">
          <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white text-opacity-70 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </div>
        <div class="flex items-center space-x-3">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
          <span class="font-medium hidden sm:block">Jane Doe</span>
        </div>
      </div>

      <!-- Create New Post -->
      <div class="p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg">
        <div class="flex items-center space-x-4 mb-4">
          <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
          <input type="text" placeholder="What's on your mind?" class="flex-grow p-3 rounded-full bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-40 border border-white border-opacity-30 dark:border-gray-600 focus:outline-none focus:ring-1 focus:ring-purple-400 placeholder-white placeholder-opacity-70 dark:placeholder-gray-300">
        </div>
        <div class="flex justify-between items-center">
          <div class="flex space-x-3">
            <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors duration-300" title="Add Photos">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            </button>
            <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors duration-300" title="Add Video">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m-4 8h4M17 8h4m-4 8h4M8 17h8m-1-4l4-4m-4 4l4 4m-12 0l-4-4m4 4l-4-4"></path></svg>
            </button>
            <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors duration-300" title="Tag Friends">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM12 14c-1.49 0-2.873.084-4.245.288C7.178 14.614 6 15.698 6 17v1h12v-1c0-1.302-1.178-2.386-2.755-2.612C14.873 14.084 13.49 14 12 14z"></path></svg>
            </button>
          </div>
          <button class="px-6 py-2 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 rounded-full font-semibold transition-colors duration-300 shadow-md">
            Post
          </button>
        </div>
      </div>

      <!-- Example Feed Post 1 -->
      <article class="p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg">
        <div class="flex items-center space-x-3 mb-4">
          <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
          <div>
            <p class="font-semibold">John Smith</p>
            <p class="text-sm text-white text-opacity-70 dark:text-gray-300">2 hours ago</p>
          </div>
        </div>
        <p class="mb-4 text-white text-opacity-90 dark:text-gray-100">Enjoying the breathtaking views from the mountains! Nature always finds a way to surprise me. #travel #nature #mountains</p>
        <img src="https://picsum.photos/600/350" alt="Post Image" class="w-full h-auto rounded-lg mb-4 border border-white border-opacity-20 dark:border-gray-700 object-cover">
        <div class="flex justify-between items-center text-white text-opacity-80 dark:text-gray-200">
          <div class="flex space-x-4">
            <button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
              <span>245 Likes</span>
            </button>
            <button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              <span>32 Comments</span>
            </button>
          </div>
          <button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path></svg>
            <span>Share</span>
          </button>
        </div>
      </article>

      <!-- Example Feed Post 2 -->
      <article class="p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg">
        <div class="flex items-center space-x-3 mb-4">
          <img src="https://randomuser.me/api/portraits/women/9.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
          <div>
            <p class="font-semibold">Sarah Green</p>
            <p class="text-sm text-white text-opacity-70 dark:text-gray-300">5 hours ago</p>
          </div>
        </div>
        <p class="mb-4 text-white text-opacity-90 dark:text-gray-100">Just finished a new piece for my portfolio! Super excited to share it with you all. What do you think? #art #digitalart #design</p>
        <img src="https://picsum.photos/600/400" alt="Post Image" class="w-full h-auto rounded-lg mb-4 border border-white border-opacity-20 dark:border-gray-700 object-cover">
        <div class="flex justify-between items-center text-white text-opacity-80 dark:text-gray-200">
          <div class="flex space-x-4">
            <button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
              <span>180 Likes</span>
            </button>
            <button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              <span>25 Comments</span>
            </button>
          </div>
          <button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path></svg>
            <span>Share</span>
          </button>
        </div>
      </article>

    </main>

    <!-- Right Sidebar -->
    <aside class="lg:col-span-1 p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg hidden lg:block">
      <h3 class="font-bold text-lg mb-4 text-shadow-sm">Trending Topics</h3>
      <ul class="space-y-3 mb-6">
        <li><a href="#" class="text-white text-opacity-80 hover:text-purple-300 transition-colors duration-200">#AIrevolution <span class="text-sm text-opacity-60 block">1.2M posts</span></a></li>
        <li><a href="#" class="text-white text-opacity-80 hover:text-purple-300 transition-colors duration-200">#WebDesignTrends <span class="text-sm text-opacity-60 block">890K posts</span></a></li>
        <li><a href="#" class="text-white text-opacity-80 hover:text-purple-300 transition-colors duration-200">#NewMusicFriday <span class="text-sm text-opacity-60 block">750K posts</span></a></li>
        <li><a href="#" class="text-white text-opacity-80 hover:text-purple-300 transition-colors duration-200">#FitnessChallenge <span class="text-sm text-opacity-60 block">600K posts</span></a></li>
      </ul>

      <h3 class="font-bold text-lg mb-4 text-shadow-sm">Who to Follow</h3>
      <ul class="space-y-4">
        <li class="flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
            <div>
              <p class="font-medium">Emily White</p>
              <p class="text-sm text-white text-opacity-70 dark:text-gray-300">@emilyart</p>
            </div>
          </div>
          <button class="px-4 py-1 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 rounded-full text-sm transition-colors duration-300 shadow-md">Follow</button>
        </li>
        <li class="flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
            <div>
              <p class="font-medium">Michael Brown</p>
              <p class="text-sm text-white text-opacity-70 dark:text-gray-300">@techguru</p>
            </div>
          </div>
          <button class="px-4 py-1 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 rounded-full text-sm transition-colors duration-300 shadow-md">Follow</button>
        </li>
        <li class="flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
            <div>
              <p class="font-medium">Olivia Davis</p>
              <p class="text-sm text-white text-opacity-70 dark:text-gray-300">@foodieolivia</p>
            </div>
          </div>
          <button class="px-4 py-1 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 rounded-full text-sm transition-colors duration-300 shadow-md">Follow</button>
        </li>
      </ul>
    </aside>

  </div>
</div>