-
Notifications
You must be signed in to change notification settings - Fork 2
/
profile
254 lines (250 loc) · 26.5 KB
/
profile
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
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<div class="flex justify-center h-full bg-red-200 w-full overflow-y-auto">
<div class="flex mx-4 space-x-4 md:space-x-20 w-full xl:max-w-6xl">
<!-- Nav big screen -->
<div class="flex flex-col hidden py-6 px-2 lg:block w-[22rem] h-full fixed space-y-6 overflow-y-auto">
<!--Side menu -->
<div>
<a class="flex space-x-2 hover:bg-gray-50 p-2 items-center rounded cursor-pointer">
<svg class="flex-none" width="32" height="32" viewBox="0 0 48 48" fill="rgba(254, 44, 85, 1.0)" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.9505 7.84001C24.3975 7.38666 23.6014 7.38666 23.0485 7.84003L6.94846 21.04C6.45839 21.4418 6.2737 22.1083 6.48706 22.705C6.70041 23.3017 7.26576 23.7 7.89949 23.7H10.2311L11.4232 36.7278C11.5409 38.0149 12.6203 39 13.9128 39H21.5C22.0523 39 22.5 38.5523 22.5 38V28.3153C22.5 27.763 22.9477 27.3153 23.5 27.3153H24.5C25.0523 27.3153 25.5 27.763 25.5 28.3153V38C25.5 38.5523 25.9477 39 26.5 39H34.0874C35.3798 39 36.4592 38.0149 36.577 36.7278L37.7691 23.7H40.1001C40.7338 23.7 41.2992 23.3017 41.5125 22.705C41.7259 22.1082 41.5412 21.4418 41.0511 21.04L24.9505 7.84001Z">
</path>
</svg>
<h2 class="font-bold text-lg text-rose-500">Pour toi</h2>
</a>
<a class="flex space-x-2 hover:bg-gray-50 p-2 items-center rounded cursor-pointer">
<svg class="flex-none" width="32" height="32" viewBox="0 0 48 48" fill="rgba(22, 24, 35, 1.0)" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 12.5C15.5897 12.5 13.5849 14.5018 13.5849 17.0345C13.5849 19.5672 15.5897 21.569 18 21.569C20.4103 21.569 22.4151 19.5672 22.4151 17.0345C22.4151 14.5018 20.4103 12.5 18 12.5ZM10.5849 17.0345C10.5849 12.9017 13.8766 9.5 18 9.5C22.1234 9.5 25.4151 12.9017 25.4151 17.0345C25.4151 21.1673 22.1234 24.569 18 24.569C13.8766 24.569 10.5849 21.1673 10.5849 17.0345ZM18 29.8793C14.0801 29.8793 10.7403 32.5616 9.69697 36.2673C9.5473 36.7989 9.03833 37.1708 8.49337 37.0811L7.50662 36.9189C6.96166 36.8292 6.58837 36.3131 6.72325 35.7776C8.00732 30.6788 12.5509 26.8793 18 26.8793C23.449 26.8793 27.9927 30.6788 29.2767 35.7776C29.4116 36.3131 29.0383 36.8292 28.4934 36.9189L27.5066 37.0811C26.9617 37.1708 26.4527 36.7989 26.303 36.2673C25.2597 32.5616 21.9199 29.8793 18 29.8793Z">
</path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M33 31.5371C32.2445 31.5371 31.5198 31.668 30.8447 31.9093C30.3246 32.0951 29.7189 31.9243 29.4549 31.4392L28.9769 30.5608C28.713 30.0757 28.8907 29.463 29.4009 29.2516C30.513 28.791 31.7285 28.5371 33 28.5371C37.4554 28.5371 41.1594 31.6303 42.2706 35.7812C42.4135 36.3147 42.0386 36.8308 41.4935 36.9196L40.5065 37.0804C39.9614 37.1692 39.4546 36.7956 39.2894 36.2686C38.4217 33.5 35.91 31.5371 33 31.5371Z">
</path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M33 18.5C31.6193 18.5 30.5 19.6193 30.5 21C30.5 22.3807 31.6193 23.5 33 23.5C34.3807 23.5 35.5 22.3807 35.5 21C35.5 19.6193 34.3807 18.5 33 18.5ZM27.5 21C27.5 17.9624 29.9624 15.5 33 15.5C36.0376 15.5 38.5 17.9624 38.5 21C38.5 24.0376 36.0376 26.5 33 26.5C29.9624 26.5 27.5 24.0376 27.5 21Z">
</path>
</svg>
<h2 class="bold text-lg">Abonnements</h2>
</a>
<a class="flex space-x-2 hover:bg-gray-50 p-2 items-center rounded cursor-pointer">
<svg class="flex-none" width="32" height="32" viewBox="0 0 32 32" fill="rgba(22, 24, 35, 1.0)" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.78511 10.3334C6.95518 10.3334 6.33301 10.9792 6.33301 11.7143V20.2858C6.33301 21.0209 6.95518 21.6667 7.78511 21.6667H18.5744C19.4043 21.6667 20.0265 21.0209 20.0265 20.2858V17.5602C20.0265 17.1826 20.2392 16.8372 20.5763 16.6672C20.9135 16.4973 21.3177 16.5317 21.6212 16.7563L25.6663 19.7488V12.2513L21.6212 15.2439C21.3177 15.4684 20.9135 15.5029 20.5763 15.3329C20.2392 15.1629 20.0265 14.8175 20.0265 14.4399V11.7143C20.0265 10.9792 19.4043 10.3334 18.5744 10.3334H7.78511ZM25.6855 12.2371C25.6831 12.2388 25.6839 12.2383 25.6839 12.2383L25.6855 12.2371ZM25.6716 12.2177C25.673 12.2212 25.6746 12.2243 25.6763 12.2269C25.6798 12.2324 25.6834 12.2355 25.6855 12.2371L25.6874 12.2383C25.6874 12.2383 25.6865 12.238 25.6839 12.2383M4.33301 11.7143C4.33301 9.81952 5.90653 8.33337 7.78511 8.33337H18.5744C20.453 8.33337 22.0265 9.81953 22.0265 11.7143V12.4562L24.4963 10.629C25.0929 10.1877 25.8879 10.1155 26.5542 10.4359C27.224 10.758 27.6663 11.4325 27.6663 12.1905V19.8096C27.6663 20.5676 27.224 21.2421 26.5542 21.5642C25.888 21.8846 25.0929 21.8124 24.4963 21.371L22.0265 19.5439V20.2858C22.0265 22.1806 20.453 23.6667 18.5744 23.6667H7.78511C5.90653 23.6667 4.33301 22.1806 4.33301 20.2858V11.7143Z">
</path>
<path d="M15 15.134C15.6667 15.5189 15.6667 16.4811 15 16.866L12 18.5981C11.3333 18.983 10.5 18.5019 10.5 17.7321L10.5 14.2679C10.5 13.4981 11.3333 13.017 12 13.4019L15 15.134Z">
</path>
</svg>
<h2 class="bold text-lg">Live</h2>
</a>
</div>
<!--/ Side menu -->
<hr>
<!-- Connexion -->
<div class="flex flex-col space-y-4">
<p class="text-gray-500 text-sm">Connecte-toi pour suivre des créateurs, aimer des vidéos et voir les commentaires. </p>
<button class="border border-rose-500 hover:bg-rose-100 w-full p-2 rounded text-rose-500 font-bold text-lg">Connexion</button>
</div>
<!--/ Connexion -->
<hr>
<!-- Account -->
<div class="flex flex-col space-y-2 justify-center">
<h1 class="text-sm">Comptes suggérés</h1>
<div>
<div class="flex space-x-2 p-2 hover:bg-gray-100 rounded-md cursor-pointer">
<img class="rounded-full w-8 h-8" src="assets/images/accounts/img-1.jpeg" alt="">
<div class="flex flex-col">
<div class="flex items-center space-x-2">
<span>Laeteci</span>
<svg class="tiktok-shsbhf-StyledVerifyBadge e1aglo370" width="14" height="14" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="24" cy="24" r="24" fill="#20D5EC"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M37.1213 15.8787C38.2929 17.0503 38.2929 18.9497 37.1213 20.1213L23.6213 33.6213C22.4497 34.7929 20.5503 34.7929 19.3787 33.6213L10.8787 25.1213C9.70711 23.9497 9.70711 22.0503 10.8787 20.8787C12.0503 19.7071 13.9497 19.7071 15.1213 20.8787L21.5 27.2574L32.8787 15.8787C34.0503 14.7071 35.9497 14.7071 37.1213 15.8787Z" fill="white"></path></svg>
</div>
<span class="text-xs">Laeteci</span>
</div>
</div>
<div class="flex space-x-2 p-2 hover:bg-gray-100 rounded-md cursor-pointer">
<img class="rounded-full w-8 h-8" src="assets/images/accounts/img-2.jpeg" alt="">
<div class="flex flex-col">
<div class="flex items-center space-x-2">
<span>Misdes</span>
<svg class="tiktok-shsbhf-StyledVerifyBadge e1aglo370" width="14" height="14" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="24" cy="24" r="24" fill="#20D5EC"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M37.1213 15.8787C38.2929 17.0503 38.2929 18.9497 37.1213 20.1213L23.6213 33.6213C22.4497 34.7929 20.5503 34.7929 19.3787 33.6213L10.8787 25.1213C9.70711 23.9497 9.70711 22.0503 10.8787 20.8787C12.0503 19.7071 13.9497 19.7071 15.1213 20.8787L21.5 27.2574L32.8787 15.8787C34.0503 14.7071 35.9497 14.7071 37.1213 15.8787Z" fill="white"></path></svg>
</div>
<span class="text-xs">Misded</span>
</div>
</div>
<div class="flex space-x-2 p-2 hover:bg-gray-100 rounded-md cursor-pointer">
<img class="rounded-full w-8 h-8" src="assets/images/accounts/img-3.jpeg" alt="">
<div class="flex flex-col">
<div class="flex items-center space-x-2">
<span>Messa_adde</span>
</div>
<span class="text-xs">Messa_adde</span>
</div>
</div>
<div class="flex space-x-2 p-2 hover:bg-gray-100 rounded-md cursor-pointer">
<img class="rounded-full w-8 h-8" src="assets/images/accounts/img-4.jpeg" alt="">
<div class="flex flex-col">
<div class="flex items-center space-x-2">
<span>Yalszadde</span>
</div>
<span class="text-xs">Yalszadde</span>
</div>
</div>
<h1 class="text-sm text-rose-500 cursor-pointer">Tout afficher</h1>
</div>
</div>
<!--/ Account -->
<hr>
<!-- Discovery -->
<div class="flex flex-col space-y-2">
<h1 class="text-sm">Découvrir</h1>
<div class="flex flex-wrap space-y-2 space-x-2 max-w-full">
<div class="flex items-center space-x-2 text-sm h-8 rounded-full border px-4 py-1">
<span>
<svg class="tiktok-1hy6k9f-StyledNumber eikhr9j9" width="16" height="16" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4263 15L16.9566 3.95205C16.9822 3.41902 17.4218 2.99999 17.9554 2.99999H19.9494C20.5202 2.99999 20.9752 3.47701 20.9483 4.04718L20.4308 15H28.4263L28.9566 3.95205C28.9822 3.41902 29.4218 2.99999 29.9554 2.99999H31.9494C32.5202 2.99999 32.9752 3.47701 32.9483 4.04718L32.4308 15H43C43.5523 15 44 15.4477 44 16V18C44 18.5523 43.5523 19 43 19H32.2404L31.8118 28H42C42.5523 28 43 28.4477 43 29V31C43 31.5523 42.5523 32 42 32H31.6213L31.0434 44.0479C31.0178 44.581 30.5782 45 30.0446 45H28.0507C27.4798 45 27.0248 44.523 27.0518 43.9528L27.6168 32H19.6213L19.0434 44.0479C19.0178 44.581 18.5782 45 18.0446 45H16.0507C15.4798 45 15.0248 44.523 15.0518 43.9528L15.6168 32H5C4.44772 32 4 31.5523 4 31V29C4 28.4477 4.44772 28 5 28H15.8073L16.2358 19H6C5.44772 19 5 18.5523 5 18V16C5 15.4477 5.44772 15 6 15H16.4263ZM20.2404 19L19.8118 28H27.8073L28.2358 19H20.2404Z">
</path>
</svg>
</span>
<span>gamercheck</span>
</div>
<div class="flex items-center space-x-2 text-sm h-8 rounded-full border px-4 py-1">
<span>
<svg class="tiktok-1hy6k9f-StyledNumber eikhr9j9" width="16" height="16" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4263 15L16.9566 3.95205C16.9822 3.41902 17.4218 2.99999 17.9554 2.99999H19.9494C20.5202 2.99999 20.9752 3.47701 20.9483 4.04718L20.4308 15H28.4263L28.9566 3.95205C28.9822 3.41902 29.4218 2.99999 29.9554 2.99999H31.9494C32.5202 2.99999 32.9752 3.47701 32.9483 4.04718L32.4308 15H43C43.5523 15 44 15.4477 44 16V18C44 18.5523 43.5523 19 43 19H32.2404L31.8118 28H42C42.5523 28 43 28.4477 43 29V31C43 31.5523 42.5523 32 42 32H31.6213L31.0434 44.0479C31.0178 44.581 30.5782 45 30.0446 45H28.0507C27.4798 45 27.0248 44.523 27.0518 43.9528L27.6168 32H19.6213L19.0434 44.0479C19.0178 44.581 18.5782 45 18.0446 45H16.0507C15.4798 45 15.0248 44.523 15.0518 43.9528L15.6168 32H5C4.44772 32 4 31.5523 4 31V29C4 28.4477 4.44772 28 5 28H15.8073L16.2358 19H6C5.44772 19 5 18.5523 5 18V16C5 15.4477 5.44772 15 6 15H16.4263ZM20.2404 19L19.8118 28H27.8073L28.2358 19H20.2404Z">
</path>
</svg>
</span>
<span>اغنية_لؤلؤ</span>
</div>
<div class="flex items-center space-x-2 text-sm h-8 rounded-full border px-4 py-1">
<span>
<svg class="tiktok-1hy6k9f-StyledNumber eikhr9j9" width="16" height="16" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4263 15L16.9566 3.95205C16.9822 3.41902 17.4218 2.99999 17.9554 2.99999H19.9494C20.5202 2.99999 20.9752 3.47701 20.9483 4.04718L20.4308 15H28.4263L28.9566 3.95205C28.9822 3.41902 29.4218 2.99999 29.9554 2.99999H31.9494C32.5202 2.99999 32.9752 3.47701 32.9483 4.04718L32.4308 15H43C43.5523 15 44 15.4477 44 16V18C44 18.5523 43.5523 19 43 19H32.2404L31.8118 28H42C42.5523 28 43 28.4477 43 29V31C43 31.5523 42.5523 32 42 32H31.6213L31.0434 44.0479C31.0178 44.581 30.5782 45 30.0446 45H28.0507C27.4798 45 27.0248 44.523 27.0518 43.9528L27.6168 32H19.6213L19.0434 44.0479C19.0178 44.581 18.5782 45 18.0446 45H16.0507C15.4798 45 15.0248 44.523 15.0518 43.9528L15.6168 32H5C4.44772 32 4 31.5523 4 31V29C4 28.4477 4.44772 28 5 28H15.8073L16.2358 19H6C5.44772 19 5 18.5523 5 18V16C5 15.4477 5.44772 15 6 15H16.4263ZM20.2404 19L19.8118 28H27.8073L28.2358 19H20.2404Z">
</path>
</svg>
</span>
<span>latenightsnack</span>
</div>
<div class="flex items-center space-x-2 text-sm h-8 rounded-full border px-4 py-1">
<span>
<svg class="tiktok-1hy6k9f-StyledNumber eikhr9j9" width="16" height="16" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4263 15L16.9566 3.95205C16.9822 3.41902 17.4218 2.99999 17.9554 2.99999H19.9494C20.5202 2.99999 20.9752 3.47701 20.9483 4.04718L20.4308 15H28.4263L28.9566 3.95205C28.9822 3.41902 29.4218 2.99999 29.9554 2.99999H31.9494C32.5202 2.99999 32.9752 3.47701 32.9483 4.04718L32.4308 15H43C43.5523 15 44 15.4477 44 16V18C44 18.5523 43.5523 19 43 19H32.2404L31.8118 28H42C42.5523 28 43 28.4477 43 29V31C43 31.5523 42.5523 32 42 32H31.6213L31.0434 44.0479C31.0178 44.581 30.5782 45 30.0446 45H28.0507C27.4798 45 27.0248 44.523 27.0518 43.9528L27.6168 32H19.6213L19.0434 44.0479C19.0178 44.581 18.5782 45 18.0446 45H16.0507C15.4798 45 15.0248 44.523 15.0518 43.9528L15.6168 32H5C4.44772 32 4 31.5523 4 31V29C4 28.4477 4.44772 28 5 28H15.8073L16.2358 19H6C5.44772 19 5 18.5523 5 18V16C5 15.4477 5.44772 15 6 15H16.4263ZM20.2404 19L19.8118 28H27.8073L28.2358 19H20.2404Z">
</path>
</svg>
</span>
<span>notthatmuch</span>
</div>
<div class="flex items-center space-x-2 text-sm h-8 rounded-full border px-4 py-1">
<span>
<svg class="tiktok-1hy6k9f-StyledNumber eikhr9j9" width="16" height="16" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4263 15L16.9566 3.95205C16.9822 3.41902 17.4218 2.99999 17.9554 2.99999H19.9494C20.5202 2.99999 20.9752 3.47701 20.9483 4.04718L20.4308 15H28.4263L28.9566 3.95205C28.9822 3.41902 29.4218 2.99999 29.9554 2.99999H31.9494C32.5202 2.99999 32.9752 3.47701 32.9483 4.04718L32.4308 15H43C43.5523 15 44 15.4477 44 16V18C44 18.5523 43.5523 19 43 19H32.2404L31.8118 28H42C42.5523 28 43 28.4477 43 29V31C43 31.5523 42.5523 32 42 32H31.6213L31.0434 44.0479C31.0178 44.581 30.5782 45 30.0446 45H28.0507C27.4798 45 27.0248 44.523 27.0518 43.9528L27.6168 32H19.6213L19.0434 44.0479C19.0178 44.581 18.5782 45 18.0446 45H16.0507C15.4798 45 15.0248 44.523 15.0518 43.9528L15.6168 32H5C4.44772 32 4 31.5523 4 31V29C4 28.4477 4.44772 28 5 28H15.8073L16.2358 19H6C5.44772 19 5 18.5523 5 18V16C5 15.4477 5.44772 15 6 15H16.4263ZM20.2404 19L19.8118 28H27.8073L28.2358 19H20.2404Z">
</path>
</svg>
</span>
<span>ما_نستمر</span>
</div>
</div>
</div>
<!--/ Discovery -->
<hr>
<!-- Footer -->
<div class="flex flex-col space-y-2 pb-8 text-xs text-gray-600">
<div class="">
<a href="#">À propos</a>
<a href="#">Salle de presse</a>
<a href="#">Contact</a>
<a href="#">Emplois</a>
<a href="#">ByteDance</a>
</div>
<div class="">
<a href="">TikTok for Good</a>
<a href="">Faire de la publicité</a>
<a href="">Developers</a>
<a href="">Transparency</a>
<a href="">Récompenses TikTok</a>
</div>
<div class="">
<a href="">Aide</a>
<a href="">Sécurité</a>
<a href="">Conditions</a>
<a href="">Confidentialité</a>
<a href="">Creator Portal</a>
<a href="">Consignes communautaires</a>
<a href="">Droit d'auteur</a>
</div>
<div class="">
<a href="">Plus</a>
</div>
<div>© 2022 TikTok</div>
</div>
<!--/ Footer -->
</div>
<!--/ Nav big screen -->
<!-- Proliles -->
<div class="flex flex-col flex-grow bg-green-100 h-full pt-10 px-2">
<div class="flex space-x-2 bg-red-100 w-full ">
<!-- Image profil -->
<div class="shrink-0">
<img class="flex-none rounded-full w-14 h-14" src="assets/images/profiles/profile-1.jpeg" alt="">
</div>
<!-- Image profil -->
<div class="flex-grow bg-green-400">
<!-- Infos profile -->
<div class="flex justify-between bg-orange-100">
<div class="flex flex-col space-y-2">
<div class="flex w-10 md:w-auto flex-wrap items-center space-x-2">
<h3 class="bold text-gray-800 ">ykange</h4>
<h4 class="text-gray-800 text-xs">Kouassi Ange Yao</h4>
</div>
<span>😹</span>
<a class="flex overflow-x-auto items-center space-x-2" href="">
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" class="tiktok-812w79-SvgIcon e1wg6xq71">
<use xlink:href="#svg-music-note">
<symbol id="svg-music-note"><path fill-rule="evenodd" clip-rule="evenodd" d="M35.0001 10.7587C35.0001 10.1169 34.4041 9.64129 33.7784 9.78359L17.7902 13.4192C17.335 13.5227 17.0119 13.9275 17.0119 14.3943V37.9972H17.0109C17.0374 40.1644 14.8022 42.4189 11.612 43.2737C8.05093 44.2279 4.64847 43.0769 4.01236 40.7028C3.37624 38.3288 5.74735 35.6308 9.30838 34.6766C10.606 34.3289 11.8826 34.2608 13.0119 34.4294V14.3943C13.0119 12.0601 14.6271 10.0364 16.9033 9.5188L32.8914 5.88317C36.0204 5.17165 39.0001 7.54986 39.0001 10.7587V33.1191C39.084 35.3108 36.8331 37.6109 33.6032 38.4763C30.0421 39.4305 26.6397 38.2795 26.0036 35.9055C25.3675 33.5315 27.7386 30.8334 31.2996 29.8792C32.5961 29.5319 33.8715 29.4635 35.0001 29.6316V10.7587Z"></path></symbol>
</use>
</svg>
<span class="text-sm">son original - ykange</span>
</a>
</div>
<div>
<button class="border border-rose-500 px-3 py-1 rounded-md text-sm text-rose-500 font-bold">S'abonner</button>
</div>
</div>
<!--/ Infos profile -->
<div class="bg-red-300">
<video class="h-130 rounded-md" src="assets/videos/video-1.mp4" autoplay muted></video>
</div>
</div>
</div>
<div class="flex space-x-2 bg-red-100 w-full ">
<!-- Image profil -->
<div class="shrink-0">
<img class="flex-none rounded-full w-14 h-14" src="assets/images/profiles/profile-1.jpeg" alt="">
</div>
<!-- Image profil -->
<div class="flex-grow bg-green-400">
<!-- Infos profile -->
<div class="flex justify-between bg-orange-100">
<div class="flex flex-col space-y-2">
<div class="flex w-10 md:w-auto flex-wrap items-center space-x-2">
<h3 class="bold text-gray-800 ">ykange</h4>
<h4 class="text-gray-800 text-xs">Kouassi Ange Yao</h4>
</div>
<span>😹</span>
<a class="flex overflow-x-auto items-center space-x-2" href="">
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" class="tiktok-812w79-SvgIcon e1wg6xq71">
<use xlink:href="#svg-music-note">
<symbol id="svg-music-note"><path fill-rule="evenodd" clip-rule="evenodd" d="M35.0001 10.7587C35.0001 10.1169 34.4041 9.64129 33.7784 9.78359L17.7902 13.4192C17.335 13.5227 17.0119 13.9275 17.0119 14.3943V37.9972H17.0109C17.0374 40.1644 14.8022 42.4189 11.612 43.2737C8.05093 44.2279 4.64847 43.0769 4.01236 40.7028C3.37624 38.3288 5.74735 35.6308 9.30838 34.6766C10.606 34.3289 11.8826 34.2608 13.0119 34.4294V14.3943C13.0119 12.0601 14.6271 10.0364 16.9033 9.5188L32.8914 5.88317C36.0204 5.17165 39.0001 7.54986 39.0001 10.7587V33.1191C39.084 35.3108 36.8331 37.6109 33.6032 38.4763C30.0421 39.4305 26.6397 38.2795 26.0036 35.9055C25.3675 33.5315 27.7386 30.8334 31.2996 29.8792C32.5961 29.5319 33.8715 29.4635 35.0001 29.6316V10.7587Z"></path></symbol>
</use>
</svg>
<span class="text-sm">son original - ykange</span>
</a>
</div>
<div>
<button class="border border-rose-500 px-3 py-1 rounded-md text-sm text-rose-500 font-bold">S'abonner</button>
</div>
</div>
<!--/ Infos profile -->
<div class="bg-red-300">
<video class="h-130 rounded-md" src="assets/videos/video-1.mp4" autoplay muted></video>
</div>
</div>
</div>
</div>
<!-- Proliles -->
</div>
</div>