-
Notifications
You must be signed in to change notification settings - Fork 0
/
lightviewall.html
205 lines (195 loc) · 12.1 KB
/
lightviewall.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./public/images/favicon.ico" type="image/x-icon">
<title>Instagram |comments </title>
<!-- css file -->
<!-- <link rel="stylesheet" href="./main.css"> -->
<!-- css output dev -->
<link rel="stylesheet" href="./dist/assets/index-7ca371b8.css">
</head>
<body class="max-w-md mx-auto max-h-screen bg-gradient-to-tr from-yellow-400 via-red-500 to-purple-900 bg-no-repeat font-roboto mb-10">
<div class="flex items-center justify-center">
<h4 class="p-5 text-dark font-semibold text-xl text-center">Instagram UI Challenge</h4>
<!-- adding github icon -->
<a href="https://github.com/MUTHUAKALYA/Instagram-UI-tailwind" class="text-dark hover:text-gray-800"
target="_blank" title="View-source-code">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none">
<g clip-path="url(#akarIconsGithubFill0)">
<path fill="currentColor" fill-rule="evenodd"
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385c.6.105.825-.255.825-.57c0-.285-.015-1.23-.015-2.235c-3.015.555-3.795-.735-4.035-1.41c-.135-.345-.72-1.41-1.23-1.695c-.42-.225-1.02-.78-.015-.795c.945-.015 1.62.87 1.845 1.23c1.08 1.815 2.805 1.305 3.495.99c.105-.78.42-1.305.765-1.605c-2.67-.3-5.46-1.335-5.46-5.925c0-1.305.465-2.385 1.23-3.225c-.12-.3-.54-1.53.12-3.18c0 0 1.005-.315 3.3 1.23c.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23c.66 1.65.24 2.88.12 3.18c.765.84 1.23 1.905 1.23 3.225c0 4.605-2.805 5.625-5.475 5.925c.435.375.81 1.095.81 2.22c0 1.605-.015 2.895-.015 3.3c0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12Z"
clip-rule="evenodd" />
</g>
<defs>
<clipPath id="akarIconsGithubFill0">
<path fill="#fff" d="M0 0h24v24H0z" />
</clipPath>
</defs>
</g>
</svg>
</a>
</div>
<header class="bg-white">
<div class="text-gray-400 flex justify-center pt-2">
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 16 16">
<path fill="currentColor"
d="M2 7.75A.75.75 0 0 1 2.75 7h10a.75.75 0 0 1 0 1.5h-10A.75.75 0 0 1 2 7.75Z" />
</svg>
</div>
<div class="text-black text-sm font-medium flex justify-center py-2">
<span>Comments</span>
</div>
<hr class="border-zinc-500 ">
</header>
<!-- comment section contents -->
<section class="bg-white">
<!-- first -->
<section>
<section class="px-3 py-2 flex items-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-35ZndKJSekTdPeOMBFUlGTg54pYPeqp9i8hicl78DpyEAwVhsqH05vsP-L_uJi7jMes&usqp=CAU"
alt="subashini-profile-pic" class="w-10 h-10 rounded-full object-cover">
</div>
<div class="flex flex-1 justify-between items-center pl-3">
<div class="font-medium text-sm flex flex-col">
<p class="text-black">subashini <span class="text-gray-400 text-xs pl-2">3w</span></p>
<span>❤❤</span>
<span class="text-gray-400 text-xs ">Reply</span>
</div>
<div class="flex flex-col justify-center items-center text-xs text-gray-400 font-medium">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 48 48">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="4"
d="M15 8C8.925 8 4 12.925 4 19c0 11 13 21 20 23.326C31 40 44 30 44 19c0-6.075-4.925-11-11-11c-3.72 0-7.01 1.847-9 4.674A10.987 10.987 0 0 0 15 8Z" />
</svg>
</div>
<div><span>1</span></div>
</div>
</div>
</section>
<div class="flex items-center py-2 pl-16 hover:cursor-pointer ">
<hr class="border-gray-600 w-20 ">
<span class="text-xs text-gray-400 font-medium pl-2 hover:text-black">View 4 more replies</span>
</div>
</section>
<!-- second -->
<section>
<section class="px-3 py-3 flex items-center">
<div>
<img src="https://img.freepik.com/premium-photo/cute-anime-girl-kawaiistyle-cartoon-anime-style-girl-ai-generated_755721-14233.jpg"
alt="Madhi-profile-pic" class="w-10 h-10 rounded-full object-cover">
</div>
<div class="flex flex-1 justify-between items-center pl-3">
<div class=" text-sm flex flex-col">
<p class="text-black text-sm font-medium">maa_dhi_40 <span class="text-gray-400 text-xs pl-2">3w</span></p>
<span class="text-gray-600 text-xs font-medium"> Ama nga red dhn btw cute nga 😂❤</span>
<div class="flex space-x-4 py-1">
<span class="text-gray-400 text-xs ">Reply</span>
<span class="text-gray-400 text-xs ">see translation</span>
</div>
</div>
<div class="flex flex-col justify-center items-center text-xs text-gray-400 font-medium">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 48 48">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="4"
d="M15 8C8.925 8 4 12.925 4 19c0 11 13 21 20 23.326C31 40 44 30 44 19c0-6.075-4.925-11-11-11c-3.72 0-7.01 1.847-9 4.674A10.987 10.987 0 0 0 15 8Z" />
</svg>
</div>
<div><span>58</span></div>
</div>
</div>
</section>
<div class="flex items-center py-2 pl-16 hover:cursor-pointer ">
<hr class="border-gray-600 w-20 ">
<span class="text-xs text-gray-400 font-medium pl-2 hover:text-black">View 1 more replies</span>
</div>
</section>
<!-- third -->
<section>
<section class="px-3 py-3 flex ">
<div class="pt-1">
<img src="https://img.freepik.com/premium-photo/cute-anime-girl-kawaiistyle-cartoon-anime-style-girl-ai-generated_755721-14211.jpg"
alt="Madhi-profile-pic" class="w-10 h-10 rounded-full object-cover">
</div>
<div class="flex flex-1 justify-between items-center pl-3">
<div class=" text-sm flex flex-col">
<p class="text-black text-sm font-medium">its_me_gayuu <span class="text-gray-400 text-xs pl-2">3w</span></p>
<div class="flex flex-col py-1">
<span class="text-gray-600 text-xs font-medium">siricha podhum</span>
<span class="text-gray-600 text-xs font-medium">kaththi veesuthae minnal pesudhae</span>
<span class="text-gray-600 text-xs font-medium">Andha neramae kannu koosuthae..oh. hoo..😍</span>
<span class="text-gray-500 text-xs font-medium">yash uh</span>
</div>
<div class="flex space-x-4 py-1">
<span class="text-gray-400 text-xs ">Reply</span>
<span class="text-gray-400 text-xs ">see translation</span>
</div>
</div>
<div class="flex flex-col justify-center items-center text-xs text-gray-400 font-medium">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 48 48">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="4"
d="M15 8C8.925 8 4 12.925 4 19c0 11 13 21 20 23.326C31 40 44 30 44 19c0-6.075-4.925-11-11-11c-3.72 0-7.01 1.847-9 4.674A10.987 10.987 0 0 0 15 8Z" />
</svg>
</div>
<div><span>10</span></div>
</div>
</div>
</section>
</section>
<!-- fourth -->
<section>
<section class="px-3 py-2 flex items-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_yNS42oStx9NxTVlLNeLizvXXcf8hmnRnV71n_sc6BiNzYp9Z3DjOjUWXes4-sNcwHns&usqp=CAU"
alt="priya-profile-pic" class="w-10 h-10 rounded-full object-cover">
</div>
<div class="flex flex-1 justify-between items-center pl-3">
<div class="font-medium text-sm flex flex-col">
<p class="text-black">priyaa__<span class="text-gray-400 text-xs pl-2">5w</span></p>
<span class="text-gray-600 text-xs font-medium py-1">Boomm❤💥</span>
<span class="text-gray-400 text-xs ">Reply</span>
</div>
<div class="flex flex-col justify-center items-center text-xs text-gray-400 font-medium">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 48 48">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="4"
d="M15 8C8.925 8 4 12.925 4 19c0 11 13 21 20 23.326C31 40 44 30 44 19c0-6.075-4.925-11-11-11c-3.72 0-7.01 1.847-9 4.674A10.987 10.987 0 0 0 15 8Z" />
</svg>
</div>
<div><span>7</span></div>
</div>
</div>
</section>
</section>
</section>
<footer class="bg-white">
<section class="flex justify-between px-3 py-3 text-xl">
<a href="">❤</a>
<a href="">🙌</a>
<a href="">🔥</a>
<a href="">👏</a>
<a href="">😢</a>
<a href="">😍</a>
<a href="">😮</a>
<a href="">😂</a>
</section>
<section class="px-3 py-3 flex items-center">
<div class="text-gray-400 ">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="40" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88a9.947 9.947 0 0 1 12.28 0C16.43 19.18 14.03 20 12 20z"/></svg>
</div>
<div class="bg-white text-gray-400 text-sm font-medium flex flex-1 items-center justify-between">
<input type="text" placeholder="Add a comment for yashwanth_05 ···" class="p-3 w-[300px] outline-none">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="text-white"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 8H6a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2v-4H7m5-4v8m4-4h3m1-4h-4v8"/></svg>
</div>
</section>
</footer>
</body>
</html>