DEV Community
Mr Abdullah WebDev
Posted on
YouTube Clone Built with HTML & CSS – Add It to Your Own Website!
I created a fully functional YouTube homepage clone using just HTML and CSS! This project helped me improve my front-end development skills and understand how layout, responsiveness, and design come together. If you’re learning web development or want to use a cool template for your own site, check it out!
👉 Coded from scratch 👉 Fully responsive design 👉 Perfect for practice or portfolio use
Let me know what you think in the comments and don’t forget to like & follow for more projects like this!
YouTubeClone #HTMLCSS #WebDevelopment #FrontendProject #CodingJourney #WebDesign #DeveloperLife #ResponsiveDesign #CloneProject #CodeNewbie #100DaysOfCode #LearnToCode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<script>tailwind.config={theme:{extend:{colors:{primary:'#ff0000',secondary:'#606060'},borderRadius:{'none':'0px','sm':'4px',DEFAULT:'8px','md':'12px','lg':'16px','xl':'20px','2xl':'24px','3xl':'32px','full':'9999px','button':'8px'}}}}</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet">
<style>
:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Roboto', sans-serif;
}
.video-duration {
right: 8px;
bottom: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar {
width: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius: 4px;
}
.sidebar-scrollbar::-webkit-scrollbar-track {
background-color: transparent;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.category-scrollbar::-webkit-scrollbar {
height: 0;
display: none;
}
</style>
</head>
<body class="bg-white">
<!-- Fixed Top Navigation Bar -->
<header class="fixed top-0 left-0 w-full h-14 bg-white border-b border-gray-200 flex items-center justify-between px-4 z-50">
<!-- Left Section - Logo -->
<div class="flex items-center">
<button class="w-10 h-10 flex items-center justify-center mr-4">
<i class="ri-menu-line ri-lg"></i>
</button>
<a href="#" class="flex items-center">
<img src="https://static.readdy.ai/image/3fe41b039d52eef3362db9f06e9e1e40/208c4e1273eb879fb258c45906a37c01.jpeg" alt="YouTube Logo" class="h-6">
</a>
</div>
<!-- Center Section - Search Bar -->
<div class="flex-1 max-w-xl mx-4">
<div class="flex">
<div class="relative flex-1">
<input type="text" placeholder="Search" class="w-full h-10 pl-4 pr-10 border border-gray-300 rounded-l-button focus:outline-none focus:border-blue-500">
<div class="absolute right-2 top-1/2 transform -translate-y-1/2 w-8 h-8 flex items-center justify-center text-gray-500">
<i class="ri-search-line ri-lg"></i>
</div>
</div>
<button class="w-14 h-10 bg-gray-100 border border-l-0 border-gray-300 rounded-r-button flex items-center justify-center !rounded-button">
<i class="ri-search-line ri-lg"></i>
</button>
<button class="w-10 h-10 ml-2 bg-gray-100 rounded-full flex items-center justify-center">
<i class="ri-mic-line ri-lg"></i>
</button>
</div>
</div>
<!-- Right Section - Actions -->
<div class="flex items-center">
<button class="w-10 h-10 mx-2 flex items-center justify-center">
<i class="ri-video-add-line ri-lg"></i>
</button>
<button class="w-10 h-10 mx-2 flex items-center justify-center relative">
<i class="ri-notification-line ri-lg"></i>
<span class="absolute top-1 right-1 bg-primary text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
</button>
<button class="w-8 h-8 mx-2 overflow-hidden rounded-full">
<img src="https://public.readdy.ai/ai/img_res/967231341ca3cba6e0a7b835976f402b.jpg" alt="User Profile" class="w-full h-full object-cover">
</button>
</div>
</header>
<!-- Sidebar Navigation -->
<aside class="fixed top-14 left-0 w-60 h-[calc(100vh-56px)] bg-white overflow-y-auto sidebar-scrollbar z-40">
<div class="py-3">
<!-- Main Navigation -->
<div class="border-b border-gray-200 pb-3">
<a href="#" class="flex items-center px-6 py-2 bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-home-fill ri-lg text-primary"></i>
</div>
<span class="text-sm font-medium">Home</span>
</a>
<a href="https://readdy.ai/home/baeed544-39b8-49fe-bd91-1dfc375a95f3/08439bab-59c1-4cb2-8755-13a2b4c111e8" data-readdy="true" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-play-circle-line ri-lg"></i>
</div>
<span class="text-sm">Shorts</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-subscription-line ri-lg"></i>
</div>
<span class="text-sm">Subscriptions</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-folder-video-line ri-lg"></i>
</div>
<span class="text-sm">Library</span>
</a>
</div>
<!-- Subscriptions -->
<div class="py-3 border-b border-gray-200">
<h3 class="px-6 py-1 text-sm font-medium">Subscriptions</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/40d0452ed529ed25f4ffb22f7c75bc2b.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Tech Insider</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/07a23356187550fcc1e1eb0a04847e76.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Music Vibes</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/741bb530ab86b390a39017dd0d960d00.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">GamersHub</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/2c2d9a83e03f1fe1fa921ea2b2dd63df.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Cooking Masters</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/202034341bb7bd86eb31be539ad9083d.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Science Now</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/3baa2eba167a5a3091ed6ccf75db05de.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Fitness Pro</span>
</a>
</div>
<!-- Explore -->
<div class="py-3 border-b border-gray-200">
<h3 class="px-6 py-1 text-sm font-medium">Explore</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-fire-line ri-lg"></i>
</div>
<span class="text-sm">Trending</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-music-line ri-lg"></i>
</div>
<span class="text-sm">Music</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-gamepad-line ri-lg"></i>
</div>
<span class="text-sm">Gaming</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-newspaper-line ri-lg"></i>
</div>
<span class="text-sm">News</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-trophy-line ri-lg"></i>
</div>
<span class="text-sm">Sports</span>
</a>
</div>
<!-- More from YouTube -->
<div class="py-3">
<h3 class="px-6 py-1 text-sm font-medium">More from YouTube</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-youtube-fill ri-lg text-primary"></i>
</div>
<span class="text-sm">YouTube Premium</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-film-line ri-lg"></i>
</div>
<span class="text-sm">YouTube Movies</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-live-line ri-lg"></i>
</div>
<span class="text-sm">Live</span>
</a>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="pt-14 pl-60">
<!-- Video Categories -->
<div class="sticky top-14 bg-white z-30 border-b border-gray-200">
<div class="overflow-x-auto category-scrollbar whitespace-nowrap py-3 px-6">
<button class="px-3 py-1.5 mr-3 bg-black text-white text-sm rounded-full !rounded-button whitespace-nowrap">All</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Music</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Gaming</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">News</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Live</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Podcasts</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Technology</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Comedy</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Sports</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Education</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Travel</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Cooking</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Fitness</button>
</div>
</div>
<!-- Video Grid -->
<div class="grid grid-cols-3 gap-4 p-6">
<!-- Video 1 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/caa91af20639d03e17ea6b53df6d0d13.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">12:34</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/cbe1aabef20ff5dacb7e29ca851b7d78.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Ultimate Review: The New iPhone 15 Pro - Everything You Need to Know!</h3>
<p class="text-xs text-gray-600 mt-1">TechReviewPro</p>
<p class="text-xs text-gray-600">1.2M views • 3 days ago</p>
</div>
</div>
</div>
<!-- Video 2 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/9a8b878a3d47c2ced4a5a28fe6878881.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">18:42</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/0d8a5d3837ead8ade97086a15104dbb2.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">How to Make the Perfect Homemade Pasta - Simple Italian Recipes</h3>
<p class="text-xs text-gray-600 mt-1">Cooking With Julia</p>
<p class="text-xs text-gray-600">845K views • 1 week ago</p>
</div>
</div>
</div>
<!-- Video 3 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/665fed089fe5447f3fdb7779ca3b3eeb.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">2:05:18</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/2fa8335fe08764995f6a22ea738ae501.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">LIVE: Epic Fortnite Tournament - Road to Champion Division!</h3>
<p class="text-xs text-gray-600 mt-1">GameMaster Pro</p>
<p class="text-xs text-gray-600">325K views • Streamed 2 days ago</p>
</div>
</div>
</div>
<!-- Video 4 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/e54a11aa3c8cc57a2e04e86245cee9a5.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">4:26</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/4e50f27126fb6b0b065e326680cf7a37.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Midnight Dreams - Official Music Video (New Release 2025)</h3>
<p class="text-xs text-gray-600 mt-1">Horizon Band</p>
<p class="text-xs text-gray-600">2.8M views • 5 days ago</p>
</div>
</div>
</div>
<!-- Video 5 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/d2f9c0ce7acc81de9cda0274bb8fb267.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">28:15</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/694b82b0d4580a7ea853db75d77fc6e5.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">30-Minute Full Body HIIT Workout - No Equipment Needed!</h3>
<p class="text-xs text-gray-600 mt-1">FitLife with Sarah</p>
<p class="text-xs text-gray-600">1.5M views • 2 weeks ago</p>
</div>
</div>
</div>
<!-- Video 6 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/3af3baaffd7f8abd834738f706ebec7c.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">22:47</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/64d91d3579d178a1e65cda9072568e95.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Exploring Hidden Gems in Bali - Ultimate Travel Guide 2025</h3>
<p class="text-xs text-gray-600 mt-1">Wanderlust Adventures</p>
<p class="text-xs text-gray-600">687K views • 3 weeks ago</p>
</div>
</div>
</div>
<!-- Video 7 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/418779e83c6175b6f60a8416c5ca6c88.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">15:32</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/df5d6526aeeffd1645e5c5b122527f54.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">10 Mind-Blowing Science Experiments You Can Do At Home</h3>
<p class="text-xs text-gray-600 mt-1">Science Explained</p>
<p class="text-xs text-gray-600">4.2M views • 1 month ago</p>
</div>
</div>
</div>
<!-- Video 8 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/1fb43319676bca2995f7ff9e17641672.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">8:53</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/762fe699ca8f15deb9ee6c864d8c0bf4.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">When Your Boss Catches You Sleeping at Work - Comedy Sketch</h3>
<p class="text-xs text-gray-600 mt-1">Laugh Factory</p>
<p class="text-xs text-gray-600">7.5M views • 2 months ago</p>
</div>
</div>
</div>
<!-- Video 9 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/d7b54fea197dab55b435b7efb5d782bb.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">10:05</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/f40a2809746bd770744c44f64699237c.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Breaking: Major Technology Breakthrough Announced - What This Means For The Future</h3>
<p class="text-xs text-gray-600 mt-1">Global News Network</p>
<p class="text-xs text-gray-600">1.1M views • 12 hours ago</p>
</div>
</div>
</div>
<!-- Video 10 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/904411de890501bd9af69d849561abfc.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">14:22</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/9d4ed7a29bd08af9350052bf0db777f4.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Unboxing the PlayStation 6 - First Look and Impressions!</h3>
<p class="text-xs text-gray-600 mt-1">Tech Unboxed</p>
<p class="text-xs text-gray-600">3.4M views • 1 day ago</p>
</div>
</div>
</div>
<!-- Video 11 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/4ee95e1d7da4131afea84038a8c6ca69.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">42:18</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/8d1688e15e9c0dc980543360027a8e18.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">The Secret Life of Arctic Wolves - Full Documentary 2025</h3>
<p class="text-xs text-gray-600 mt-1">Nature Discoveries</p>
<p class="text-xs text-gray-600">2.3M views • 2 weeks ago</p>
</div>
</div>
</div>
<!-- Video 12 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/e5431f695bdd55077cf6c73f181bdbe6.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">1:12:45</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/538a38ef4e7d67607e1d752002a534fb.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Interview with World-Famous Entrepreneur: Secrets to Success and Future Plans</h3>
<p class="text-xs text-gray-600 mt-1">The Deep Dive Podcast</p>
<p class="text-xs text-gray-600">895K views • 4 days ago</p>
</div>
</div>
</div>
</div>
</main>
<script>
// Infinite scroll simulation
window.addEventListener('scroll', function() {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
// Would load more content in a real implementation
console.log("Load more content");
}
});
// Tooltip functionality
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('mouseenter', function(e) {
// Would show tooltip in a real implementation
});
button.addEventListener('mouseleave', function(e) {
// Would hide tooltip in a real implementation
});
});
</script>
</body>
</html>
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<script>tailwind.config={theme:{extend:{colors:{primary:'#ff0000',secondary:'#606060'},borderRadius:{'none':'0px','sm':'4px',DEFAULT:'8px','md':'12px','lg':'16px','xl':'20px','2xl':'24px','3xl':'32px','full':'9999px','button':'8px'}}}}</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet">
<style>
:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Roboto', sans-serif;
}
.video-duration {
right: 8px;
bottom: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar {
width: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius: 4px;
}
.sidebar-scrollbar::-webkit-scrollbar-track {
background-color: transparent;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.category-scrollbar::-webkit-scrollbar {
height: 0;
display: none;
}
</style>
</head>
<body class="bg-white">
<!-- Fixed Top Navigation Bar -->
<header class="fixed top-0 left-0 w-full h-14 bg-white border-b border-gray-200 flex items-center justify-between px-4 z-50">
<!-- Left Section - Logo -->
<div class="flex items-center">
<button class="w-10 h-10 flex items-center justify-center mr-4">
<i class="ri-menu-line ri-lg"></i>
</button>
<a href="#" class="flex items-center">
<img src="https://static.readdy.ai/image/3fe41b039d52eef3362db9f06e9e1e40/208c4e1273eb879fb258c45906a37c01.jpeg" alt="YouTube Logo" class="h-6">
</a>
</div>
<!-- Center Section - Search Bar -->
<div class="flex-1 max-w-xl mx-4">
<div class="flex">
<div class="relative flex-1">
<input type="text" placeholder="Search" class="w-full h-10 pl-4 pr-10 border border-gray-300 rounded-l-button focus:outline-none focus:border-blue-500">
<div class="absolute right-2 top-1/2 transform -translate-y-1/2 w-8 h-8 flex items-center justify-center text-gray-500">
<i class="ri-search-line ri-lg"></i>
</div>
</div>
<button class="w-14 h-10 bg-gray-100 border border-l-0 border-gray-300 rounded-r-button flex items-center justify-center !rounded-button">
<i class="ri-search-line ri-lg"></i>
</button>
<button class="w-10 h-10 ml-2 bg-gray-100 rounded-full flex items-center justify-center">
<i class="ri-mic-line ri-lg"></i>
</button>
</div>
</div>
<!-- Right Section - Actions -->
<div class="flex items-center">
<button class="w-10 h-10 mx-2 flex items-center justify-center">
<i class="ri-video-add-line ri-lg"></i>
</button>
<button class="w-10 h-10 mx-2 flex items-center justify-center relative">
<i class="ri-notification-line ri-lg"></i>
<span class="absolute top-1 right-1 bg-primary text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
</button>
<button class="w-8 h-8 mx-2 overflow-hidden rounded-full">
<img src="https://public.readdy.ai/ai/img_res/967231341ca3cba6e0a7b835976f402b.jpg" alt="User Profile" class="w-full h-full object-cover">
</button>
</div>
</header>
<!-- Sidebar Navigation -->
<aside class="fixed top-14 left-0 w-60 h-[calc(100vh-56px)] bg-white overflow-y-auto sidebar-scrollbar z-40">
<div class="py-3">
<!-- Main Navigation -->
<div class="border-b border-gray-200 pb-3">
<a href="#" class="flex items-center px-6 py-2 bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-home-fill ri-lg text-primary"></i>
</div>
<span class="text-sm font-medium">Home</span>
</a>
<a href="https://readdy.ai/home/baeed544-39b8-49fe-bd91-1dfc375a95f3/08439bab-59c1-4cb2-8755-13a2b4c111e8" data-readdy="true" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-play-circle-line ri-lg"></i>
</div>
<span class="text-sm">Shorts</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-subscription-line ri-lg"></i>
</div>
<span class="text-sm">Subscriptions</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-folder-video-line ri-lg"></i>
</div>
<span class="text-sm">Library</span>
</a>
</div>
<!-- Subscriptions -->
<div class="py-3 border-b border-gray-200">
<h3 class="px-6 py-1 text-sm font-medium">Subscriptions</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/40d0452ed529ed25f4ffb22f7c75bc2b.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Tech Insider</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/07a23356187550fcc1e1eb0a04847e76.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Music Vibes</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/741bb530ab86b390a39017dd0d960d00.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">GamersHub</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/2c2d9a83e03f1fe1fa921ea2b2dd63df.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Cooking Masters</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/202034341bb7bd86eb31be539ad9083d.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Science Now</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/3baa2eba167a5a3091ed6ccf75db05de.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Fitness Pro</span>
</a>
</div>
<!-- Explore -->
<div class="py-3 border-b border-gray-200">
<h3 class="px-6 py-1 text-sm font-medium">Explore</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-fire-line ri-lg"></i>
</div>
<span class="text-sm">Trending</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-music-line ri-lg"></i>
</div>
<span class="text-sm">Music</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-gamepad-line ri-lg"></i>
</div>
<span class="text-sm">Gaming</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-newspaper-line ri-lg"></i>
</div>
<span class="text-sm">News</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-trophy-line ri-lg"></i>
</div>
<span class="text-sm">Sports</span>
</a>
</div>
<!-- More from YouTube -->
<div class="py-3">
<h3 class="px-6 py-1 text-sm font-medium">More from YouTube</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-youtube-fill ri-lg text-primary"></i>
</div>
<span class="text-sm">YouTube Premium</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-film-line ri-lg"></i>
</div>
<span class="text-sm">YouTube Movies</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-live-line ri-lg"></i>
</div>
<span class="text-sm">Live</span>
</a>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="pt-14 pl-60">
<!-- Video Categories -->
<div class="sticky top-14 bg-white z-30 border-b border-gray-200">
<div class="overflow-x-auto category-scrollbar whitespace-nowrap py-3 px-6">
<button class="px-3 py-1.5 mr-3 bg-black text-white text-sm rounded-full !rounded-button whitespace-nowrap">All</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Music</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Gaming</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">News</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Live</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Podcasts</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Technology</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Comedy</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Sports</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Education</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Travel</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Cooking</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Fitness</button>
</div>
</div>
<!-- Video Grid -->
<div class="grid grid-cols-3 gap-4 p-6">
<!-- Video 1 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/caa91af20639d03e17ea6b53df6d0d13.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">12:34</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/cbe1aabef20ff5dacb7e29ca851b7d78.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Ultimate Review: The New iPhone 15 Pro - Everything You Need to Know!</h3>
<p class="text-xs text-gray-600 mt-1">TechReviewPro</p>
<p class="text-xs text-gray-600">1.2M views • 3 days ago</p>
</div>
</div>
</div>
<!-- Video 2 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/9a8b878a3d47c2ced4a5a28fe6878881.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">18:42</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/0d8a5d3837ead8ade97086a15104dbb2.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">How to Make the Perfect Homemade Pasta - Simple Italian Recipes</h3>
<p class="text-xs text-gray-600 mt-1">Cooking With Julia</p>
<p class="text-xs text-gray-600">845K views • 1 week ago</p>
</div>
</div>
</div>
<!-- Video 3 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/665fed089fe5447f3fdb7779ca3b3eeb.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">2:05:18</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/2fa8335fe08764995f6a22ea738ae501.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">LIVE: Epic Fortnite Tournament - Road to Champion Division!</h3>
<p class="text-xs text-gray-600 mt-1">GameMaster Pro</p>
<p class="text-xs text-gray-600">325K views • Streamed 2 days ago</p>
</div>
</div>
</div>
<!-- Video 4 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/e54a11aa3c8cc57a2e04e86245cee9a5.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">4:26</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/4e50f27126fb6b0b065e326680cf7a37.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Midnight Dreams - Official Music Video (New Release 2025)</h3>
<p class="text-xs text-gray-600 mt-1">Horizon Band</p>
<p class="text-xs text-gray-600">2.8M views • 5 days ago</p>
</div>
</div>
</div>
<!-- Video 5 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/d2f9c0ce7acc81de9cda0274bb8fb267.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">28:15</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/694b82b0d4580a7ea853db75d77fc6e5.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">30-Minute Full Body HIIT Workout - No Equipment Needed!</h3>
<p class="text-xs text-gray-600 mt-1">FitLife with Sarah</p>
<p class="text-xs text-gray-600">1.5M views • 2 weeks ago</p>
</div>
</div>
</div>
<!-- Video 6 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/3af3baaffd7f8abd834738f706ebec7c.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">22:47</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/64d91d3579d178a1e65cda9072568e95.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Exploring Hidden Gems in Bali - Ultimate Travel Guide 2025</h3>
<p class="text-xs text-gray-600 mt-1">Wanderlust Adventures</p>
<p class="text-xs text-gray-600">687K views • 3 weeks ago</p>
</div>
</div>
</div>
<!-- Video 7 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/418779e83c6175b6f60a8416c5ca6c88.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">15:32</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/df5d6526aeeffd1645e5c5b122527f54.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">10 Mind-Blowing Science Experiments You Can Do At Home</h3>
<p class="text-xs text-gray-600 mt-1">Science Explained</p>
<p class="text-xs text-gray-600">4.2M views • 1 month ago</p>
</div>
</div>
</div>
<!-- Video 8 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/1fb43319676bca2995f7ff9e17641672.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">8:53</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/762fe699ca8f15deb9ee6c864d8c0bf4.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">When Your Boss Catches You Sleeping at Work - Comedy Sketch</h3>
<p class="text-xs text-gray-600 mt-1">Laugh Factory</p>
<p class="text-xs text-gray-600">7.5M views • 2 months ago</p>
</div>
</div>
</div>
<!-- Video 9 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/d7b54fea197dab55b435b7efb5d782bb.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">10:05</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/f40a2809746bd770744c44f64699237c.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Breaking: Major Technology Breakthrough Announced - What This Means For The Future</h3>
<p class="text-xs text-gray-600 mt-1">Global News Network</p>
<p class="text-xs text-gray-600">1.1M views • 12 hours ago</p>
</div>
</div>
</div>
<!-- Video 10 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/904411de890501bd9af69d849561abfc.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">14:22</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/9d4ed7a29bd08af9350052bf0db777f4.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Unboxing the PlayStation 6 - First Look and Impressions!</h3>
<p class="text-xs text-gray-600 mt-1">Tech Unboxed</p>
<p class="text-xs text-gray-600">3.4M views • 1 day ago</p>
</div>
</div>
</div>
<!-- Video 11 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/4ee95e1d7da4131afea84038a8c6ca69.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">42:18</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/8d1688e15e9c0dc980543360027a8e18.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">The Secret Life of Arctic Wolves - Full Documentary 2025</h3>
<p class="text-xs text-gray-600 mt-1">Nature Discoveries</p>
<p class="text-xs text-gray-600">2.3M views • 2 weeks ago</p>
</div>
</div>
</div>
<!-- Video 12 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/e5431f695bdd55077cf6c73f181bdbe6.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">1:12:45</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/538a38ef4e7d67607e1d752002a534fb.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Interview with World-Famous Entrepreneur: Secrets to Success and Future Plans</h3>
<p class="text-xs text-gray-600 mt-1">The Deep Dive Podcast</p>
<p class="text-xs text-gray-600">895K views • 4 days ago</p>
</div>
</div>
</div>
</div>
</main>
<script>
// Infinite scroll simulation
window.addEventListener('scroll', function() {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
// Would load more content in a real implementation
console.log("Load more content");
}
});
// Tooltip functionality
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('mouseenter', function(e) {
// Would show tooltip in a real implementation
});
button.addEventListener('mouseleave', function(e) {
// Would hide tooltip in a real implementation
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<script>tailwind.config={theme:{extend:{colors:{primary:'#ff0000',secondary:'#606060'},borderRadius:{'none':'0px','sm':'4px',DEFAULT:'8px','md':'12px','lg':'16px','xl':'20px','2xl':'24px','3xl':'32px','full':'9999px','button':'8px'}}}}</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet">
<style>
:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Roboto', sans-serif;
}
.video-duration {
right: 8px;
bottom: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar {
width: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius: 4px;
}
.sidebar-scrollbar::-webkit-scrollbar-track {
background-color: transparent;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.category-scrollbar::-webkit-scrollbar {
height: 0;
display: none;
}
</style>
</head>
<body class="bg-white">
<!-- Fixed Top Navigation Bar -->
<header class="fixed top-0 left-0 w-full h-14 bg-white border-b border-gray-200 flex items-center justify-between px-4 z-50">
<!-- Left Section - Logo -->
<div class="flex items-center">
<button class="w-10 h-10 flex items-center justify-center mr-4">
<i class="ri-menu-line ri-lg"></i>
</button>
<a href="#" class="flex items-center">
<img src="https://static.readdy.ai/image/3fe41b039d52eef3362db9f06e9e1e40/208c4e1273eb879fb258c45906a37c01.jpeg" alt="YouTube Logo" class="h-6">
</a>
</div>
<!-- Center Section - Search Bar -->
<div class="flex-1 max-w-xl mx-4">
<div class="flex">
<div class="relative flex-1">
<input type="text" placeholder="Search" class="w-full h-10 pl-4 pr-10 border border-gray-300 rounded-l-button focus:outline-none focus:border-blue-500">
<div class="absolute right-2 top-1/2 transform -translate-y-1/2 w-8 h-8 flex items-center justify-center text-gray-500">
<i class="ri-search-line ri-lg"></i>
</div>
</div>
<button class="w-14 h-10 bg-gray-100 border border-l-0 border-gray-300 rounded-r-button flex items-center justify-center !rounded-button">
<i class="ri-search-line ri-lg"></i>
</button>
<button class="w-10 h-10 ml-2 bg-gray-100 rounded-full flex items-center justify-center">
<i class="ri-mic-line ri-lg"></i>
</button>
</div>
</div>
<!-- Right Section - Actions -->
<div class="flex items-center">
<button class="w-10 h-10 mx-2 flex items-center justify-center">
<i class="ri-video-add-line ri-lg"></i>
</button>
<button class="w-10 h-10 mx-2 flex items-center justify-center relative">
<i class="ri-notification-line ri-lg"></i>
<span class="absolute top-1 right-1 bg-primary text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
</button>
<button class="w-8 h-8 mx-2 overflow-hidden rounded-full">
<img src="https://public.readdy.ai/ai/img_res/967231341ca3cba6e0a7b835976f402b.jpg" alt="User Profile" class="w-full h-full object-cover">
</button>
</div>
</header>
<!-- Sidebar Navigation -->
<aside class="fixed top-14 left-0 w-60 h-[calc(100vh-56px)] bg-white overflow-y-auto sidebar-scrollbar z-40">
<div class="py-3">
<!-- Main Navigation -->
<div class="border-b border-gray-200 pb-3">
<a href="#" class="flex items-center px-6 py-2 bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-home-fill ri-lg text-primary"></i>
</div>
<span class="text-sm font-medium">Home</span>
</a>
<a href="https://readdy.ai/home/baeed544-39b8-49fe-bd91-1dfc375a95f3/08439bab-59c1-4cb2-8755-13a2b4c111e8" data-readdy="true" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-play-circle-line ri-lg"></i>
</div>
<span class="text-sm">Shorts</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-subscription-line ri-lg"></i>
</div>
<span class="text-sm">Subscriptions</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-folder-video-line ri-lg"></i>
</div>
<span class="text-sm">Library</span>
</a>
</div>
<!-- Subscriptions -->
<div class="py-3 border-b border-gray-200">
<h3 class="px-6 py-1 text-sm font-medium">Subscriptions</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/40d0452ed529ed25f4ffb22f7c75bc2b.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Tech Insider</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/07a23356187550fcc1e1eb0a04847e76.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Music Vibes</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/741bb530ab86b390a39017dd0d960d00.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">GamersHub</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/2c2d9a83e03f1fe1fa921ea2b2dd63df.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Cooking Masters</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/202034341bb7bd86eb31be539ad9083d.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Science Now</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/3baa2eba167a5a3091ed6ccf75db05de.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Fitness Pro</span>
</a>
</div>
<!-- Explore -->
<div class="py-3 border-b border-gray-200">
<h3 class="px-6 py-1 text-sm font-medium">Explore</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-fire-line ri-lg"></i>
</div>
<span class="text-sm">Trending</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-music-line ri-lg"></i>
</div>
<span class="text-sm">Music</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-gamepad-line ri-lg"></i>
</div>
<span class="text-sm">Gaming</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-newspaper-line ri-lg"></i>
</div>
<span class="text-sm">News</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-trophy-line ri-lg"></i>
</div>
<span class="text-sm">Sports</span>
</a>
</div>
<!-- More from YouTube -->
<div class="py-3">
<h3 class="px-6 py-1 text-sm font-medium">More from YouTube</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-youtube-fill ri-lg text-primary"></i>
</div>
<span class="text-sm">YouTube Premium</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-film-line ri-lg"></i>
</div>
<span class="text-sm">YouTube Movies</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-live-line ri-lg"></i>
</div>
<span class="text-sm">Live</span>
</a>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="pt-14 pl-60">
<!-- Video Categories -->
<div class="sticky top-14 bg-white z-30 border-b border-gray-200">
<div class="overflow-x-auto category-scrollbar whitespace-nowrap py-3 px-6">
<button class="px-3 py-1.5 mr-3 bg-black text-white text-sm rounded-full !rounded-button whitespace-nowrap">All</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Music</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Gaming</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">News</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Live</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Podcasts</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Technology</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Comedy</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Sports</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Education</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Travel</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Cooking</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Fitness</button>
</div>
</div>
<!-- Video Grid -->
<div class="grid grid-cols-3 gap-4 p-6">
<!-- Video 1 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/caa91af20639d03e17ea6b53df6d0d13.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">12:34</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/cbe1aabef20ff5dacb7e29ca851b7d78.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Ultimate Review: The New iPhone 15 Pro - Everything You Need to Know!</h3>
<p class="text-xs text-gray-600 mt-1">TechReviewPro</p>
<p class="text-xs text-gray-600">1.2M views • 3 days ago</p>
</div>
</div>
</div>
<!-- Video 2 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/9a8b878a3d47c2ced4a5a28fe6878881.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">18:42</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/0d8a5d3837ead8ade97086a15104dbb2.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">How to Make the Perfect Homemade Pasta - Simple Italian Recipes</h3>
<p class="text-xs text-gray-600 mt-1">Cooking With Julia</p>
<p class="text-xs text-gray-600">845K views • 1 week ago</p>
</div>
</div>
</div>
<!-- Video 3 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/665fed089fe5447f3fdb7779ca3b3eeb.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">2:05:18</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/2fa8335fe08764995f6a22ea738ae501.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">LIVE: Epic Fortnite Tournament - Road to Champion Division!</h3>
<p class="text-xs text-gray-600 mt-1">GameMaster Pro</p>
<p class="text-xs text-gray-600">325K views • Streamed 2 days ago</p>
</div>
</div>
</div>
<!-- Video 4 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/e54a11aa3c8cc57a2e04e86245cee9a5.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">4:26</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/4e50f27126fb6b0b065e326680cf7a37.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Midnight Dreams - Official Music Video (New Release 2025)</h3>
<p class="text-xs text-gray-600 mt-1">Horizon Band</p>
<p class="text-xs text-gray-600">2.8M views • 5 days ago</p>
</div>
</div>
</div>
<!-- Video 5 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/d2f9c0ce7acc81de9cda0274bb8fb267.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">28:15</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/694b82b0d4580a7ea853db75d77fc6e5.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">30-Minute Full Body HIIT Workout - No Equipment Needed!</h3>
<p class="text-xs text-gray-600 mt-1">FitLife with Sarah</p>
<p class="text-xs text-gray-600">1.5M views • 2 weeks ago</p>
</div>
</div>
</div>
<!-- Video 6 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/3af3baaffd7f8abd834738f706ebec7c.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">22:47</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/64d91d3579d178a1e65cda9072568e95.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Exploring Hidden Gems in Bali - Ultimate Travel Guide 2025</h3>
<p class="text-xs text-gray-600 mt-1">Wanderlust Adventures</p>
<p class="text-xs text-gray-600">687K views • 3 weeks ago</p>
</div>
</div>
</div>
<!-- Video 7 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/418779e83c6175b6f60a8416c5ca6c88.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">15:32</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/df5d6526aeeffd1645e5c5b122527f54.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">10 Mind-Blowing Science Experiments You Can Do At Home</h3>
<p class="text-xs text-gray-600 mt-1">Science Explained</p>
<p class="text-xs text-gray-600">4.2M views • 1 month ago</p>
</div>
</div>
</div>
<!-- Video 8 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/1fb43319676bca2995f7ff9e17641672.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">8:53</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/762fe699ca8f15deb9ee6c864d8c0bf4.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">When Your Boss Catches You Sleeping at Work - Comedy Sketch</h3>
<p class="text-xs text-gray-600 mt-1">Laugh Factory</p>
<p class="text-xs text-gray-600">7.5M views • 2 months ago</p>
</div>
</div>
</div>
<!-- Video 9 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/d7b54fea197dab55b435b7efb5d782bb.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">10:05</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/f40a2809746bd770744c44f64699237c.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Breaking: Major Technology Breakthrough Announced - What This Means For The Future</h3>
<p class="text-xs text-gray-600 mt-1">Global News Network</p>
<p class="text-xs text-gray-600">1.1M views • 12 hours ago</p>
</div>
</div>
</div>
<!-- Video 10 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/904411de890501bd9af69d849561abfc.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">14:22</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/9d4ed7a29bd08af9350052bf0db777f4.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Unboxing the PlayStation 6 - First Look and Impressions!</h3>
<p class="text-xs text-gray-600 mt-1">Tech Unboxed</p>
<p class="text-xs text-gray-600">3.4M views • 1 day ago</p>
</div>
</div>
</div>
<!-- Video 11 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/4ee95e1d7da4131afea84038a8c6ca69.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">42:18</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/8d1688e15e9c0dc980543360027a8e18.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">The Secret Life of Arctic Wolves - Full Documentary 2025</h3>
<p class="text-xs text-gray-600 mt-1">Nature Discoveries</p>
<p class="text-xs text-gray-600">2.3M views • 2 weeks ago</p>
</div>
</div>
</div>
<!-- Video 12 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/e5431f695bdd55077cf6c73f181bdbe6.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">1:12:45</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/538a38ef4e7d67607e1d752002a534fb.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Interview with World-Famous Entrepreneur: Secrets to Success and Future Plans</h3>
<p class="text-xs text-gray-600 mt-1">The Deep Dive Podcast</p>
<p class="text-xs text-gray-600">895K views • 4 days ago</p>
</div>
</div>
</div>
</div>
</main>
<script>
// Infinite scroll simulation
window.addEventListener('scroll', function() {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
// Would load more content in a real implementation
console.log("Load more content");
}
});
// Tooltip functionality
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('mouseenter', function(e) {
// Would show tooltip in a real implementation
});
button.addEventListener('mouseleave', function(e) {
// Would hide tooltip in a real implementation
});
});
</script>
</body>
</html>
`
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)