1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>YouTube Clone</title>
7 <link href="/path/to/your/tailwind.css" rel="stylesheet">
8</head>
9<body class="bg-gray-100">
10
11 <!-- Header -->
12 <header class="p-5 bg-white shadow-md">
13 <div class="container mx-auto flex justify-between items-center">
14 <h1 class="text-xl font-bold text-red-600">YourTube</h1>
15 <input type="text" placeholder="Search" class="border p-1 rounded">
16 <nav>
17 <a href="#" class="text-gray-600 hover:text-black mx-2">Home</a>
18 <a href="#" class="text-gray-600 hover:text-black mx-2">Trending</a>
19 <a href="#" class="text-gray-600 hover:text-black mx-2">Subscriptions</a>
20 </nav>
21 </div>
22 </header>
23
24 <!-- Main Content -->
25 <main class="container mx-auto p-5 grid grid-cols-4 gap-5">
26 <!-- Video -->
27 <div class="col-span-1">
28 <div class="bg-white shadow-md rounded">
29 <img src="https://i.ytimg.com/vi/ybN2N_hAf1M/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLA6pPk2d4m-hXeCAIgX3zJ4HB6D1g" alt="Video Thumbnail" class="w-full">
30 <div class="p-5">
31 <h2 class="text-lg font-bold">Video Title</h2>
32 <p class="text-gray-600">Video description...</p>
33 </div>
34 </div>
35 </div>
36 <!-- Repeat the "video" div as needed -->
37 <div class="col-span-1">
38 <div class="bg-white shadow-md rounded">
39 <img src="https://i.ytimg.com/vi/ybN2N_hAf1M/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLA6pPk2d4m-hXeCAIgX3zJ4HB6D1g" alt="Video Thumbnail" class="w-full">
40 <div class="p-5">
41 <h2 class="text-lg font-bold">Video Title</h2>
42 <p class="text-gray-600">Video description...</p>
43 </div>
44 </div>
45 </div>
46 <div class="col-span-1">
47 <div class="bg-white shadow-md rounded">
48 <img src="https://i.ytimg.com/vi/ybN2N_hAf1M/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLA6pPk2d4m-hXeCAIgX3zJ4HB6D1g" alt="Video Thumbnail" class="w-full">
49 <div class="p-5">
50 <h2 class="text-lg font-bold">Video Title</h2>
51 <p class="text-gray-600">Video description...</p>
52 </div>
53 </div>
54 </div>
55 <div class="col-span-1">
56 <div class="bg-white shadow-md rounded">
57 <img src="https://i.ytimg.com/vi/ybN2N_hAf1M/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLA6pPk2d4m-hXeCAIgX3zJ4HB6D1g" alt="Video Thumbnail" class="w-full">
58 <div class="p-5">
59 <h2 class="text-lg font-bold">Video Title</h2>
60 <p class="text-gray-600">Video description...</p>
61 </div>
62 </div>
63 </div>
64 <div class="col-span-1">
65 <div class="bg-white shadow-md rounded">
66 <img src="https://i.ytimg.com/vi/ybN2N_hAf1M/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLA6pPk2d4m-hXeCAIgX3zJ4HB6D1g" alt="Video Thumbnail" class="w-full">
67 <div class="p-5">
68 <h2 class="text-lg font-bold">Video Title</h2>
69 <p class="text-gray-600">Video description...</p>
70 </div>
71 </div>
72 </div>
73 <div class="col-span-1">...</div>
74 <div class="col-span-1">...</div>
75 <div class="col-span-1">...</div>
76 </main>
77
78</body>
79</html>
80
81== MOVIE PAGE ==
82<!DOCTYPE html>
83<html lang="en">
84<head>
85 <meta charset="UTF-8">
86 <meta name="viewport" content="width=device-width, initial-scale=1.0">
87 <title>YouTube Clone</title>
88 <link href="/path/to/your/tailwind.css" rel="stylesheet">
89</head>
90<body class="bg-gray-100">
91
92 <!-- Header -->
93 <header class="p-5 bg-white shadow-md">
94 <div class="container mx-auto flex justify-between items-center">
95 <h1 class="text-xl font-bold text-red-600">YourTube</h1>
96 <input type="text" placeholder="Search" class="border p-1 rounded">
97 <nav>
98 <a href="#" class="text-gray-600 hover:text-black mx-2">Home</a>
99 <a href="#" class="text-gray-600 hover:text-black mx-2">Trending</a>
100 <a href="#" class="text-gray-600 hover:text-black mx-2">Subscriptions</a>
101 </nav>
102 </div>
103 </header>
104
105 <!-- Main Content -->
106 <main class="container mx-auto p-5">
107 <!-- Video -->
108 <div class="bg-white shadow-md rounded mb-5">
109 <img src="https://i.ytimg.com/vi/ybN2N_hAf1M/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLA6pPk2d4m-hXeCAIgX3zJ4HB6D1g" alt="Video" class="w-full">
110 <div class="p-5">
111 <h2 class="text-lg font-bold">Video Title</h2>
112 <p class="text-gray-600">Video description...</p>
113 </div>
114 </div>
115
116 <!-- Recommended Videos -->
117 <h2 class="text-xl font-bold mb-4">Recommended Videos</h2>
118 <div class="grid grid-cols-1 gap-5">
119 <!-- Video -->
120 <div>
121 <div class="bg-white shadow-md rounded">
122 <img src="https://i.ytimg.com/vi/ybN2N_hAf1M/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLA6pPk2d4m-hXeCAIgX3zJ4HB6D1g" alt="Video Thumbnail" class="w-full">
123 <div class="p-5">
124 <h2 class="text-lg font-bold">Video Title</h2>
125 <p class="text-gray-600">Video description...</p>
126 </div>
127 </div>
128 </div>
129 <!-- Repeat the "video" div as needed -->
130 <div>...</div>
131 <div>...</div>
132 <div>...</div>
133 </div>
134 </main>
135
136</body>
137</html>
138Created on 5/25/2023