Components
Live preview isn't available for this component.
<!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://i.pravatar.cc/40?img=6"
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://i.pravatar.cc/40?img=6" 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://i.pravatar.cc/40?img=5" 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://i.pravatar.cc/40?img=8"
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>