animal version12@

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Facebook Clone</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              fb: "#1877f2",
              fblight: "#e7f3ff",
            },
          },
        },
      };
    </script>
  </head>
  <body class="bg-gray-100 font-sans">
    <!-- Navbar -->
    <nav class="bg-white shadow sticky top-0 z-50 p-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <div class="text-fb text-3xl font-bold">facebook</div>
        <input
          type="text"
          placeholder="Search Facebook"
          class="hidden md:block bg-gray-100 px-4 py-2 rounded-full w-60 focus:outline-none focus:ring-2 focus:ring-fb"
        />
      </div>
      <div class="flex space-x-6 text-gray-600 text-xl">
        <button class="hover:text-fb">🏠</button>
        <button class="hover:text-fb">🎥</button>
        <button class="hover:text-fb">🛒</button>
        <button class="hover:text-fb">👥</button>
        <button class="hover:text-fb">🔔</button>
        <img
          src="https://cdn.21st.dev/assets/mirror/20/203bea531fb57a71cd8c970732ad68ec46c564fa19751dd98cbd32e3094d21bd.jpg"
          alt="Profile"
          class="rounded-full w-10 h-10"
        />
      </div>
    </nav>

    <!-- Layout -->
    <div class="flex flex-col md:flex-row max-w-7xl mx-auto mt-6 gap-6">
      <!-- Sidebar -->
      <aside class="w-full md:w-1/4 hidden md:block space-y-4">
        <div class="bg-white rounded-lg p-4 shadow">
          <div class="flex items-center space-x-4">
            <img src="https://cdn.21st.dev/assets/mirror/20/203bea531fb57a71cd8c970732ad68ec46c564fa19751dd98cbd32e3094d21bd.jpg" class="w-10 h-10 rounded-full" />
            <span class="font-medium">Monu Raja</span>
          </div>
        </div>
        <div class="bg-white rounded-lg p-4 shadow space-y-3">
          <a href="#" class="block hover:bg-gray-100 px-2 py-1 rounded">🧑‍🤝‍🧑 Friends</a>
          <a href="#" class="block hover:bg-gray-100 px-2 py-1 rounded">🎥 Watch</a>
          <a href="#" class="block hover:bg-gray-100 px-2 py-1 rounded">🛒 Marketplace</a>
          <a href="#" class="block hover:bg-gray-100 px-2 py-1 rounded">📰 News Feed</a>
        </div>
      </aside>

      <!-- Feed -->
      <main class="w-full md:w-2/4 space-y-6">
        <!-- Create Post -->
        <div class="bg-white p-4 rounded-lg shadow">
          <div class="flex space-x-4">
            <img src="https://cdn.21st.dev/assets/mirror/7d/7dbc6ed583a640b1bad1fc9a09332a6607d44faaaf5e9fa58133c652cd6c9607.jpg" class="w-10 h-10 rounded-full" />
            <input
              type="text"
              placeholder="What's on your mind, Monu?"
              class="w-full bg-gray-100 rounded-full px-4 py-2 focus:outline-none"
            />
          </div>
          <div class="flex justify-around mt-4 text-sm text-gray-600">
            <button class="hover:bg-gray-100 px-2 py-1 rounded">🎥 Live Video</button>
            <button class="hover:bg-gray-100 px-2 py-1 rounded">📷 Photo/Video</button>
            <button class="hover:bg-gray-100 px-2 py-1 rounded">😊 Feeling/Activity</button>
          </div>
        </div>

        <!-- Post -->
        <div class="bg-white p-4 rounded-lg shadow">
          <div class="flex items-center space-x-4 mb-2">
            <img
              src="https://cdn.21st.dev/assets/mirror/a6/a64317b2996cef1f469ae3b9c4e04afa624408da50b24c1689ee0bd67108e5f8.jpg"
              class="rounded-full w-10 h-10"
              alt="Profile"
            />
            <div>
              <p class="font-semibold">John Doe</p>
              <p class="text-sm text-gray-500">Just now · 🌍</p>
            </div>
          </div>
          <p class="mb-2">Just finished building this Facebook clone! 💻🔥</p>
          <img
            src="https://source.unsplash.com/random/600x300"
            class="w-full rounded-lg"
            alt="Post"
          />
          <div class="flex justify-around mt-3 text-gray-600 text-sm">
            <button class="hover:text-fb">👍 Like</button>
            <button class="hover:text-fb">💬 Comment</button>
            <button class="hover:text-fb">↗️ Share</button>
          </div>
        </div>
      </main>

      <!-- Right Sidebar (optional) -->
      <aside class="w-full md:w-1/4 hidden lg:block space-y-4">
        <div class="bg-white rounded-lg p-4 shadow">
          <h2 class="font-semibold mb-2">Sponsored</h2>
          <div class="space-y-2">
            <a href="#"><img src="https://source.unsplash.com/random/200x100" class="rounded" /></a>
            <a href="#"><img src="https://source.unsplash.com/random/201x100" class="rounded" /></a>
          </div>
        </div>
      </aside>
    </div>
  </body>
</html>