-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
616 lines (586 loc) · 51.5 KB
/
index.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
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
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
<!doctype html>
<html lang="en">
<head>
<title>TailwindCss</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="dist/styles.css">
</head>
<body class="bg-grey font-sans">
<header class="h-12 bg-white flex items-center">
<div class="container mx-auto flex items-center">
<div class="w-1/3 flex items-center">
<a href="#" class="mr-6 text-grey-darker font-bold text-xs flex items-center">
<svg class="mr-2" width="23px" height="22px" viewBox="0 0 23 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="TWITTER-PROFILE-2018" transform="translate(-127.000000, -12.000000)" stroke="#667580" stroke-width="2">
<g id="Header">
<g id="Left-side" transform="translate(128.000000, 8.000000)">
<g id="Home" transform="translate(0.000000, 5.000000)">
<path d="M10.4603081,0.5 C9.61630807,0.5 0.118509755,9.063 0.0245097548,10.344 C-0.162490245,11.407 0.764509755,11.625 1.31250975,11.268 C1.78150975,11.018 2.95250975,10.729 2.95250975,10.729 C2.95250975,10.729 4.34950975,17.516 5.21250975,19.271 C6.43150975,19.99 14.3065098,19.99 15.5245098,19.271 C16.6815098,18.417 18.0565098,10.709 18.0565098,10.709 C18.0565098,10.709 18.9565098,11.018 19.4245098,11.268 C19.9725098,11.625 21.0875098,11.365 20.8995098,10.302 C20.3995098,8.875 11.3043081,0.5 10.4603081,0.5 Z M8.21250975,9.188 C8.21250975,7.946 9.21950975,6.94 10.4605098,6.94 C11.7025098,6.94 12.7085098,7.946 12.7085098,9.188 C12.7085098,10.429 11.7025098,11.436 10.4605098,11.436 C9.21950975,11.436 8.21250975,10.429 8.21250975,9.188 Z" id="icon"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
<span>Home</span>
</a>
<a href="#" class="text-grey-darker font-bold text-xs flex items-center mr-6">
<div class="relative">
<svg class="mr-2" width="16px" height="20px" viewBox="0 0 16 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="TWITTER-PROFILE-2018" transform="translate(-220.000000, -13.000000)" fill="#667580" fill-rule="nonzero">
<g id="Header">
<g id="Left-side" transform="translate(128.000000, 8.000000)">
<g id="Notifications" transform="translate(92.000000, 0.000000)">
<g id="ic_notifications_none_24px" transform="translate(0.000000, 5.000000)">
<path d="M8,20 C9.1,20 10,19.1 10,18 L6,18 C6,19.1 6.9,20 8,20 Z M14,14 L14,9 C14,5.93 12.37,3.36 9.5,2.68 L9.5,2 C9.5,1.17 8.83,0.5 8,0.5 C7.17,0.5 6.5,1.17 6.5,2 L6.5,2.68 C3.64,3.36 2,5.92 2,9 L2,14 L0,16 L0,17 L16,17 L16,16 L14,14 Z M12,15 L4,15 L4,9 C4,6.52 5.51,4.5 8,4.5 C10.49,4.5 12,6.52 12,9 L12,15 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
<div class="absolute pin-t pin-r -mt-1 mr-1">
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs>
<circle id="path-1" cx="8" cy="8" r="8"></circle>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="TWITTER-PROFILE-2018" transform="translate(-225.000000, -8.000000)">
<g id="Header">
<g id="Left-side" transform="translate(128.000000, 8.000000)">
<g id="Notifications" transform="translate(92.000000, 0.000000)">
<g id="twitter/notifications" transform="translate(5.000000, 0.000000)">
<g id="twitter/fill">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#3BB9E3" xlink:href="#path-1"></use>
<g mask="url(#mask-2)" fill="#3BB9E3" id="Rectangle">
<rect x="0" y="0" width="16" height="16"></rect>
</g>
<text id="6" mask="url(#mask-2)" font-family="HelveticaNeue-Bold, Helvetica Neue" font-size="11" font-weight="bold" line-spacing="11" fill="#FFFFFF">
<tspan x="5" y="13">4</tspan>
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
<span>Notifications</span>
</a>
<a href="#" class="text-grey-darker font-bold text-xs flex items-center">
<svg class="mr-2" width="18px" height="16px" viewBox="0 0 18 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="TWITTER-PROFILE-2018" transform="translate(-345.000000, -16.000000)" fill="#667580" fill-rule="nonzero">
<g id="Header">
<g id="Left-side" transform="translate(128.000000, 8.000000)">
<g id="Discover" transform="translate(217.000000, 7.000000)">
<g id="icon" transform="translate(0.000000, 1.000000)">
<path d="M9,7.86666667 L16.0294118,4.11764706 C16.5167218,3.85774835 17.1224542,4.04210169 17.3823529,4.52941176 C17.6422516,5.01672184 17.4578983,5.62245424 16.9705882,5.88235294 L9.47058824,9.88235294 C9.17647059,10.0392157 8.82352941,10.0392157 8.52941176,9.88235294 L1.02941176,5.88235294 C0.542101691,5.62245424 0.357748353,5.01672184 0.617647059,4.52941176 C0.877545765,4.04210169 1.48327816,3.85774835 1.97058824,4.11764706 L9,7.86666667 Z" id="Shape"></path>
<path d="M15.5,13.5 L15.5,2.5 L2.5,2.5 L2.5,13.5 L15.5,13.5 Z M15.5,15.5 L2.5,15.5 C1.39571525,15.5 0.5,14.6042847 0.5,13.5 L0.5,2.5 C0.5,1.39571525 1.39571525,0.5 2.5,0.5 L15.5,0.5 C16.6042847,0.5 17.5,1.39571525 17.5,2.5 L17.5,13.5 C17.5,14.6042847 16.6042847,15.5 15.5,15.5 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
<span>Message</span>
</a>
</div>
<div class="w-1/3 flex items-center justify-center">
<svg width="21px" height="18px" viewBox="0 0 21 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="TWITTER-PROFILE-2018" transform="translate(-695.000000, -14.000000)" fill="#55ACEE">
<g id="Header">
<path d="M695.584443,29.3194234 C695.908999,29.357737 696.23925,29.3773375 696.574086,29.3773375 C698.517721,29.3773375 700.306549,28.7140992 701.726369,27.6014535 C699.910988,27.5679477 698.37889,26.3685418 697.851007,24.7203202 C698.104261,24.7687669 698.364172,24.7947284 698.631479,24.7947284 C699.00988,24.7947284 699.376374,24.7440628 699.724524,24.6492405 C697.826599,24.2681762 696.396646,22.5914044 696.396646,20.5813492 C696.396646,20.5638937 696.396646,20.546512 696.396942,20.5292044 C696.956334,20.8399286 697.595978,21.0265407 698.27608,21.0480643 C697.162917,20.3041309 696.430448,19.0343109 696.430448,17.5950387 C696.430448,16.8347591 696.635033,16.1221126 696.992133,15.509392 C699.038283,18.0192982 702.095155,19.6709221 705.543077,19.8439247 C705.472367,19.540301 705.435607,19.2236597 705.435607,18.8985124 C705.435607,16.6074667 707.293148,14.75 709.584341,14.75 C710.777534,14.75 711.855712,15.2538451 712.612516,16.0601305 C713.557484,15.8740362 714.445352,15.5287706 715.246904,15.0534018 C714.937141,16.0221128 714.279376,16.835129 713.422795,17.3485895 C714.261995,17.2482938 715.061549,17.0252913 715.805557,16.6953363 C715.249345,17.5272873 714.545944,18.2579811 713.735442,18.8428912 C713.743431,19.0207755 713.747425,19.1996952 713.747425,19.3795765 C713.747425,24.8617401 709.574652,31.1832511 701.943898,31.1832511 C699.601077,31.1832511 697.420386,30.4964921 695.584443,29.3194234 Z" id="Logo-Twitter"></path>
</g>
</g>
</g>
</svg>
</div>
<div class="w-1/3 flex items-center">
<div class="mr-2 w-64 px-3 rounded-full border border-grey bg-grey-light relative flex items-center py-2">
<input type="text" class="px-2 bg-grey-light text-grey-darker text-xs w-full font-medium" value="Search on Twitter">
<div class="relative pin-r">
<svg width="14px" height="13px" viewBox="0 0 14 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="TWITTER-PROFILE-2018" transform="translate(-1114.000000, -16.000000)" stroke="#667580">
<g id="Header">
<g id="Right-side" transform="translate(917.000000, 6.000000)">
<g id="Search">
<g id="zoom-2" transform="translate(198.000000, 11.000000)">
<path d="M12,12 L8.8,8.8" id="Shape"></path>
<circle id="Oval" cx="5.14285714" cy="5.14285714" r="5.14285714"></circle>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
<div class="mr-2">
<img class="h-8 w-8 rounded-full" src="https://pbs.twimg.com/profile_images/1029127401975042050/9-S50OcA_normal.jpg" alt="">
</div>
<div>
<button class="bg-blue-light text-white font-bold text-base rounded-full py-2 px-8">Tweet</button>
</div>
</div>
</div>
</header>
<div class="bg-blue-light min-h-xs">
</div>
<div class="h-12 bg-white shadow">
<div class="container mx-auto h-12 flex items-center">
<div class="w-1/4">
<div class="flex -mt-12 items-center justify-center">
<div class="">
<img class="h-48 w-48 border-2 shadow border-white rounded-full" src="https://pbs.twimg.com/profile_images/1029127401975042050/9-S50OcA_400x400.jpg" alt="">
</div>
</div>
</div>
<div class="w-1/2 flex items-center">
<ul class="p-0 flex items-center">
<li class="flex flex-col border-b-2 border-blue-light py-2 px-3 ">
<p class="text-grey-darker font-bold text-xss">Tweets</p>
<span class="text-blue-light font-bold text-sm text-center mt-1">3931</span>
</li>
<li class="flex flex-col py-2 px-3">
<p class="text-grey-darker font-bold text-xss">Followings</p>
<span class="text-grey-darker font-bold text-sm text-center mt-1">654</span>
</li>
<li class="flex flex-col py-2 px-3 ">
<p class="text-grey-darker font-bold text-xss">Followers</p>
<span class="text-grey-darker font-bold text-sm text-center mt-1">387</span>
</li>
<li class="flex flex-col py-2 px-3 ">
<p class="text-grey-darker font-bold text-xss">Favorites</p>
<span class="text-grey-darker font-bold text-sm text-center mt-1">265</span>
</li>
<li class="flex flex-col py-2 px-3 ">
<p class="text-grey-darker font-bold text-xss">Lists</p>
<span class="text-grey-darker font-bold text-sm text-center mt-1">8</span>
</li>
<li class="flex flex-col py-2 px-3 ">
<p class="text-grey-darker font-bold text-xss">Moments</p>
<span class="text-grey-darker font-bold text-sm text-center mt-1">0</span>
</li>
</ul>
</div>
<div class="w-1/4 flex justify-end items-center">
<div class="mr-2">
<button class="border border-blue-light text-blue-light font-semibold px-6 py-2 text-xs rounded-full">Follow</button>
</div>
<div>
<svg width="6px" height="18px" viewBox="0 0 6 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="TWITTER-PROFILE-2018" transform="translate(-1283.000000, -447.000000)" stroke="#667580">
<g id="Profile" transform="translate(0.000000, 303.000000)">
<g id="Details-Twitter" transform="translate(0.000000, 123.000000)">
<g id="icon/more" transform="translate(1284.000000, 22.000000)">
<circle id="Oval" cx="2" cy="2" r="2"></circle>
<circle id="Oval" cx="2" cy="8" r="2"></circle>
<circle id="Oval" cx="2" cy="14" r="2"></circle>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
<div class="container mx-auto flex">
<div class="w-1/4 px-8 mt-11">
<h3 class="font-bold text-black text-base">♛ mohamed benhida π%</h3>
<span class="text-grey-dark">@simo_benhida</span>
<div class="mt-6">
<p class="text-grey-darker text-sm">web developer & blogger & gamer & teacher & nerd.</p>
</div>
<div class="mt-6">
<div class="flex items-center">
<svg class="mr-2" width="14px" height="16px" viewBox="0 0 14 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="TWITTER-PROFILE-2018" transform="translate(-132.000000, -654.000000)" fill="#657786" fill-rule="nonzero">
<g id="Profile" transform="translate(0.000000, 303.000000)">
<g id="Quick-informations" transform="translate(129.000000, 350.000000)">
<g id="Place" transform="translate(3.000000, 0.000000)">
<path d="M7.04916643,1 C3.12177371,1 0,4.09516381 0,7.98907956 C0,9.88611544 0.704916643,11.6833073 2.11474993,12.9812793 C2.21545231,13.0811232 6.24354741,16.675507 6.34424979,16.775351 C6.7470593,17.074883 7.35127356,17.074883 7.6533807,16.775351 C7.75408308,16.675507 11.8828806,13.0811232 11.8828806,12.9812793 C13.2927138,11.6833073 13.9976305,9.88611544 13.9976305,7.98907956 C14.0983329,4.09516381 10.9765592,1 7.04916643,1 Z M10.4730473,11.5834633 C10.4730473,11.5834633 10.4730473,11.6833073 10.4730473,11.5834633 L7.04916643,14.5787832 L3.62528559,11.5834633 C3.62528559,11.5834633 3.62528559,11.5834633 3.62528559,11.5834633 C2.61826182,10.6848674 2.01404755,9.38689548 2.01404755,7.98907956 C2.01404755,5.19344774 4.22949986,2.99687988 7.04916643,2.99687988 C9.868833,2.99687988 12.0842853,5.19344774 12.0842853,7.98907956 C12.0842853,9.38689548 11.480071,10.6848674 10.4730473,11.5834633 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
<span class="text-grey-dark text-xs">Morroco</span>
</div>
<div class="mt-2 flex items-center">
<svg class="mr-2" width="14px" height="15px" viewBox="0 0 14 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="TWITTER-PROFILE-2018" transform="translate(-130.000000, -678.000000)" fill="#657786">
<g id="Profile" transform="translate(0.000000, 303.000000)">
<g id="Quick-informations" transform="translate(129.000000, 350.000000)">
<g id="Website" transform="translate(1.000000, 23.000000)">
<path d="M5.88543301,12.0506682 L3.76815523,9.97400499 C3.33870738,9.55397268 3.10301042,8.9949087 3.10301042,8.39961815 C3.10301042,7.8062858 3.33870738,7.24722181 3.76715651,6.82621041 L8.03666714,2.64253194 C8.90854615,1.78582269 10.4335854,1.78582269 11.3064631,2.64253194 L13.3258667,4.62226465 C13.7613069,5.04915063 14,5.61604739 14,6.21819161 C14,6.82033583 13.7603082,7.38723258 13.3258667,7.81313947 L12.0624911,9.05169628 L10.6503067,7.66823322 L11.9136824,6.42869731 C11.9875874,6.35722328 12.0025681,6.27497919 12.0025681,6.21819161 C12.0025681,6.17217408 11.9905835,6.08209722 11.9136824,6.00670681 L9.89328007,4.0269741 C9.7324868,3.8703187 9.60964474,3.8703187 9.44885148,4.0269741 L5.18033956,8.21065257 C5.1134256,8.27625202 5.10044229,8.34968424 5.10044229,8.39961815 C5.10044229,8.45053116 5.1134256,8.52494248 5.17934085,8.58956283 L7.29761735,10.6662261 L5.88543301,12.0506682 Z M2.6945356,16.3361727 L0.674133257,14.35644 C0.239691825,13.9305331 0,13.3636364 0,12.7614921 C0,12.1583688 0.239691825,11.5914721 0.674133257,11.1655652 L1.93750892,9.92700837 L3.34969325,11.3114505 L2.08631759,12.5500073 C2.00941646,12.6253978 1.99743187,12.7154746 1.99743187,12.7614921 C1.99743187,12.8173006 2.01241261,12.8995447 2.08631759,12.9719978 L4.10671993,14.9517306 C4.2675132,15.108386 4.39135397,15.108386 4.55114852,14.9517306 L8.81966044,10.7680521 C8.8865744,10.7024526 8.89955771,10.6290204 8.89955771,10.5781074 C8.89955771,10.5271944 8.8865744,10.4537622 8.82065915,10.3891418 L6.70238265,8.31345768 L8.11456699,6.92901552 L10.2328435,9.00469966 C10.6612926,9.42375288 10.8969896,9.98379596 10.8969896,10.5781074 C10.8969896,11.1724189 10.6612926,11.7324619 10.2318448,12.1515152 L5.96433157,16.3361727 C5.52789271,16.7650169 4.94763875,17 4.32943359,17 C3.71122842,17 3.13097446,16.7650169 2.6945356,16.3361727 Z" id="icon"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
<a href="mohamedbenhida.com" class="text-blue-light text-xs">mohamedbenhida.com</a>
</div>
<div class="mt-2 flex items-center">
<svg class="mr-2" width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="TWITTER-PROFILE-2018" transform="translate(-129.000000, -702.000000)" fill="#66757F">
<g id="Profile" transform="translate(0.000000, 303.000000)">
<g id="Quick-informations" transform="translate(129.000000, 350.000000)">
<g id="Sign-up" transform="translate(0.000000, 49.000000)">
<path d="M8.56774902,6.95214844 L10.7393319,6.95214844 C11.1902444,6.95214844 11.5429688,7.30903083 11.5429688,7.74926758 C11.5429688,8.19257357 11.1831683,8.54638672 10.7393319,8.54638672 L7.85148843,8.54638672 C7.40057587,8.54638672 7.04785156,8.18950432 7.04785156,7.74926758 C7.04785156,7.73981319 7.04801521,7.7303995 7.04833984,7.72102909 L7.04833984,3.76278253 C7.04833984,3.34316385 7.38847117,3 7.80804443,3 C8.23054288,3 8.56774902,3.34150937 8.56774902,3.76278253 L8.56774902,6.95214844 Z M8,16 C3.58172178,16 0,12.4182782 0,8 C0,3.58172178 3.58172178,0 8,0 C12.4182782,0 16,3.58172178 16,8 C16,12.4182782 12.4182782,16 8,16 Z M8,14.5 C11.5898511,14.5 14.5,11.5898511 14.5,8 C14.5,4.41014895 11.5898511,1.5 8,1.5 C4.41014895,1.5 1.5,4.41014895 1.5,8 C1.5,11.5898511 4.41014895,14.5 8,14.5 Z" id="icon"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
<span class="text-grey-dark text-xs">Joined June 2014</span>
</div>
<div class="mt-2 flex items-center">
<svg class="mr-2" width="18px" height="17px" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="TWITTER-PROFILE-2018" transform="translate(-128.000000, -726.000000)">
<g id="Profile" transform="translate(0.000000, 303.000000)">
<g id="Quick-informations" transform="translate(129.000000, 350.000000)">
<g id="Sign-up" transform="translate(0.000000, 74.000000)">
<g id="child">
<circle id="Oval" fill="#657786" fill-rule="nonzero" cx="5.45454545" cy="9.81818182" r="1.09090909"></circle>
<circle id="Oval" fill="#657786" fill-rule="nonzero" cx="10.5454545" cy="9.81818182" r="1.09090909"></circle>
<path d="M16,8.72727273 C16,7.64581818 15.2109091,6.75418182 14.1781818,6.58181818 C13.2894545,4.02181818 10.8625455,2.18181818 8,2.18181818 C5.13745455,2.18181818 2.71054545,4.02181818 1.82181818,6.58181818 C0.789090909,6.75418182 0,7.64581818 0,8.72727273 C0,9.80872727 0.789090909,10.7003636 1.82181818,10.8727273 C2.71054545,13.4327273 5.13745455,15.2727273 8,15.2727273 C10.8625455,15.2727273 13.2894545,13.4327273 14.1781818,10.8727273 C15.2109091,10.7003636 16,9.80872727 16,8.72727273 Z" id="Shape" stroke="#667580" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M8,4.36363636 C7.81818182,1.75781818 9.21236364,0.151272727 11.6363636,0" id="Shape" stroke="#667580" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
<span class="text-grey-dark text-xs">Born the 29th of January 1995</span>
</div>
</div>
<div class="mt-6">
<div class="flex items-center">
<svg class="mr-2" width="14px" height="16px" viewBox="0 0 14 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="TWITTER-PROFILE-2018" transform="translate(-129.000000, -779.000000)" stroke="#657786">
<g id="Profile" transform="translate(0.000000, 303.000000)">
<g id="Medias" transform="translate(128.000000, 475.000000)">
<g id="single-02" transform="translate(1.000000, 1.000000)">
<path d="M8.5,10.5 L5.5,10.5 C2.73857625,10.5 0.5,12.7385763 0.5,15.5 L13.5,15.5 C13.5,14.1739176 12.9732158,12.902148 12.0355339,11.9644661 C11.097852,11.0267842 9.82608245,10.5 8.5,10.5 Z" id="Shape"></path>
<circle id="Oval" cx="7" cy="4" r="3.5"></circle>
</g>
</g>
</g>
</g>
</g>
</svg>
<a href="#" class="text-blue-light text-xs">73 followers that you know</a>
</div>
</div>
<div class="mt-2 flex flex-wrap">
<div class="w-1/5 mb-1">
<div class="bg-grey-dark rounded-full w-10 h-10 pr-1"></div>
</div>
<div class="w-1/5 mb-1">
<div class="bg-grey-dark rounded-full w-10 h-10 pr-1"></div>
</div>
<div class="w-1/5 mb-1">
<div class="bg-grey-dark rounded-full w-10 h-10 pr-1"></div>
</div>
<div class="w-1/5 mb-1">
<div class="bg-grey-dark rounded-full w-10 h-10 pr-1"></div>
</div>
<div class="w-1/5 mb-1">
<div class="bg-grey-dark rounded-full w-10 h-10 pr-1"></div>
</div>
<div class="w-1/5 mb-1">
<div class="bg-grey-dark rounded-full w-10 h-10 pr-1"></div>
</div>
<div class="w-1/5 mb-1">
<div class="bg-grey-dark rounded-full w-10 h-10 pr-1"></div>
</div>
<div class="w-1/5 mb-1">
<div class="bg-grey-dark rounded-full w-10 h-10 pr-1"></div>
</div>
<div class="w-1/5 mb-1">
<div class="bg-grey-dark rounded-full w-10 h-10 pr-1"></div>
</div>
<div class="w-1/5 mb-1">
<div class="bg-grey-dark rounded-full w-10 h-10 pr-1"></div>
</div>
</div>
<div class="mt-4">
<div class="flex items-center">
<svg class="mr-2" width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="TWITTER-PROFILE-2018" transform="translate(-128.000000, -925.000000)">
<g id="Profile" transform="translate(0.000000, 303.000000)">
<g id="Followers" transform="translate(128.000000, 622.000000)">
<g id="image-02" transform="translate(1.000000, 1.000000)">
<polyline id="Shape" stroke="#657786" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" points="0.5 12.5 4.5 8.5 7.5 11.5 11.5 6.5 15.5 10.5"></polyline>
<path d="M14.5,15.5 L1.5,15.5 C0.948,15.5 0.5,15.052 0.5,14.5 L0.5,1.5 C0.5,0.948 0.948,0.5 1.5,0.5 L14.5,0.5 C15.052,0.5 15.5,0.948 15.5,1.5 L15.5,14.5 C15.5,15.052 15.052,15.5 14.5,15.5 Z" id="Shape" stroke="#657786" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<circle id="Oval" fill="#657786" fill-rule="nonzero" cx="6.5" cy="4.5" r="1.5"></circle>
</g>
</g>
</g>
</g>
</g>
</svg>
<a href="#" class="text-blue-light text-xs">266 Photos and videos</a>
</div>
</div>
<div class="flex flex-wrap mt-2">
<div class="w-1/3 mb-1 pr-1">
<div class="h-18 rounded-lg bg-grey-dark"></div>
</div>
<div class="w-1/3 mb-1 pr-1">
<div class="h-18 rounded-lg bg-grey-dark"></div>
</div>
<div class="w-1/3 mb-1 pr-1">
<div class="h-18 rounded-lg bg-grey-dark"></div>
</div>
<div class="w-1/3 mb-1 pr-1">
<div class="h-18 rounded-lg bg-grey-dark"></div>
</div>
<div class="w-1/3 mb-1 pr-1">
<div class="h-18 rounded-lg bg-grey-dark"></div>
</div>
<div class="w-1/3 mb-1 pr-1">
<div class="h-18 rounded-lg bg-grey-dark"></div>
</div>
</div>
</div>
<div class="w-1/2 rounded shadow mt-6 bg-white">
<div class="py-3 flex items-center border-b border-grey">
<ul class="flex p-0">
<li class="pl-3 pr-4">
<a href="#" class="text-black font-bold text-base">Tweets</a>
</li>
<li class="px-4">
<a href="#" class="text-blue-light font-bold text-base">Tweets & replies</a>
</li>
<li class="px-4">
<a href="#" class="text-blue-light font-bold text-base">Medias</a>
</li>
</ul>
</div>
<div class="flex mt-4 border-b">
<div class="w-1/8">
<img class="block mx-auto rounded-full h-12" src="https://pbs.twimg.com/profile_images/1029127401975042050/9-S50OcA_bigger.jpg" alt="">
</div>
<div class="w-7/8">
<div class="pr-3">
<h3 class="font-bold text-black text-base">♛ mohamed benhida π% <span class="text-grey-darker text-xss font-medium">@simo_benhida .</span> <span class="text-grey-darker text-xss font-medium">12 aout</span></h3>
<p class="text-grey-darkest text-xs mt-1">Twitter Page Build With <span class="text-blue-light">@tailwindcss</span> by <span class="text-blue-light">@simo_benhida</span></p>
</div>
<div class="flex items-center py-2 pl-1">
<div class="flex items-center pr-4">
<svg class="fill-current text-grey-darker h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z"/></svg>
<span class="ml-2 text-grey-darker text-xs font-semibold">10k</span>
</div>
<div class="flex items-center px-6">
<svg class="fill-current text-grey-darker h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M634.828 363.799l-98.343 98.343c-4.686 4.686-12.284 4.686-16.971 0l-98.343-98.343c-4.686-4.686-4.686-12.284 0-16.971l5.656-5.656c4.686-4.686 12.284-4.686 16.971 0l68.202 68.2V128H260.024a11.996 11.996 0 0 1-8.485-3.515l-8-8c-7.56-7.56-2.206-20.485 8.485-20.485H520c13.255 0 24 10.745 24 24v289.372l68.201-68.201c4.686-4.686 12.284-4.686 16.971 0l5.656 5.656c4.686 4.687 4.686 12.285 0 16.972zm-246.367 23.716a12.002 12.002 0 0 0-8.485-3.515H128V102.628l68.201 68.2c4.686 4.686 12.284 4.686 16.97 0l5.657-5.657c4.686-4.686 4.687-12.284 0-16.971l-98.343-98.343c-4.686-4.686-12.284-4.686-16.971 0L5.172 148.201c-4.686 4.686-4.686 12.285 0 16.971l5.657 5.657c4.686 4.686 12.284 4.686 16.97 0L96 102.628V392c0 13.255 10.745 24 24 24h267.976c10.691 0 16.045-12.926 8.485-20.485l-8-8z"/></svg>
<span class="ml-2 text-grey-darker text-xs font-semibold">30k</span>
</div>
<div class="flex items-center px-6">
<svg class="fill-current text-grey-darker h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M462.3 62.7c-54.5-46.4-136-38.7-186.6 13.5L256 96.6l-19.7-20.3C195.5 34.1 113.2 8.7 49.7 62.7c-62.8 53.6-66.1 149.8-9.9 207.8l193.5 199.8c6.2 6.4 14.4 9.7 22.6 9.7 8.2 0 16.4-3.2 22.6-9.7L472 270.5c56.4-58 53.1-154.2-9.7-207.8zm-13.1 185.6L256.4 448.1 62.8 248.3c-38.4-39.6-46.4-115.1 7.7-161.2 54.8-46.8 119.2-12.9 142.8 11.5l42.7 44.1 42.7-44.1c23.2-24 88.2-58 142.8-11.5 54 46 46.1 121.5 7.7 161.2z"/></svg>
<span class="ml-2 text-grey-darker text-xs font-semibold">120k</span>
</div>
</div>
</div>
</div>
<div class="flex mt-4 border-b">
<div class="w-1/8">
<img class="block mx-auto rounded-full h-12" src="https://pbs.twimg.com/profile_images/1029127401975042050/9-S50OcA_bigger.jpg" alt="">
</div>
<div class="w-7/8">
<div class="pr-3">
<h3 class="font-bold text-black text-base">♛ mohamed benhida π% <span class="text-grey-darker text-xss font-medium">@simo_benhida .</span> <span class="text-grey-darker text-xss font-medium">12 aout</span></h3>
<p class="text-grey-darkest text-xs mt-1"><span class="text-blue-light">@tailwindcss</span> ❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️</p>
</div>
<div class="flex justify-stretch pr-3 py-2">
<div class="w-full">
<img class="w-full rounded-l" src="https://tailwindcss.com/img/twitter-large-card.png" alt="">
</div>
</div>
<div class="flex items-center py-2 pl-1">
<div class="flex items-center pr-4">
<svg class="fill-current text-grey-darker h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z"/></svg>
<span class="ml-2 text-grey-darker text-xs font-semibold">1k</span>
</div>
<div class="flex items-center px-6">
<svg class="fill-current text-grey-darker h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M634.828 363.799l-98.343 98.343c-4.686 4.686-12.284 4.686-16.971 0l-98.343-98.343c-4.686-4.686-4.686-12.284 0-16.971l5.656-5.656c4.686-4.686 12.284-4.686 16.971 0l68.202 68.2V128H260.024a11.996 11.996 0 0 1-8.485-3.515l-8-8c-7.56-7.56-2.206-20.485 8.485-20.485H520c13.255 0 24 10.745 24 24v289.372l68.201-68.201c4.686-4.686 12.284-4.686 16.971 0l5.656 5.656c4.686 4.687 4.686 12.285 0 16.972zm-246.367 23.716a12.002 12.002 0 0 0-8.485-3.515H128V102.628l68.201 68.2c4.686 4.686 12.284 4.686 16.97 0l5.657-5.657c4.686-4.686 4.687-12.284 0-16.971l-98.343-98.343c-4.686-4.686-12.284-4.686-16.971 0L5.172 148.201c-4.686 4.686-4.686 12.285 0 16.971l5.657 5.657c4.686 4.686 12.284 4.686 16.97 0L96 102.628V392c0 13.255 10.745 24 24 24h267.976c10.691 0 16.045-12.926 8.485-20.485l-8-8z"/></svg>
<span class="ml-2 text-grey-darker text-xs font-semibold">22k</span>
</div>
<div class="flex items-center px-6">
<svg class="fill-current text-grey-darker h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M462.3 62.7c-54.5-46.4-136-38.7-186.6 13.5L256 96.6l-19.7-20.3C195.5 34.1 113.2 8.7 49.7 62.7c-62.8 53.6-66.1 149.8-9.9 207.8l193.5 199.8c6.2 6.4 14.4 9.7 22.6 9.7 8.2 0 16.4-3.2 22.6-9.7L472 270.5c56.4-58 53.1-154.2-9.7-207.8zm-13.1 185.6L256.4 448.1 62.8 248.3c-38.4-39.6-46.4-115.1 7.7-161.2 54.8-46.8 119.2-12.9 142.8 11.5l42.7 44.1 42.7-44.1c23.2-24 88.2-58 142.8-11.5 54 46 46.1 121.5 7.7 161.2z"/></svg>
<span class="ml-2 text-grey-darker text-xs font-semibold">111k</span>
</div>
</div>
</div>
</div>
<div class="flex mt-4 border-b">
<div class="w-1/8">
<img class="block mx-auto rounded-full h-12" src="https://pbs.twimg.com/profile_images/1029127401975042050/9-S50OcA_bigger.jpg" alt="">
</div>
<div class="w-7/8">
<div class="pr-3">
<h3 class="font-bold text-black text-base">♛ mohamed benhida π% <span class="text-grey-darker text-xss font-medium">@simo_benhida .</span> <span class="text-grey-darker text-xss font-medium">12 aout</span></h3>
<p class="text-grey-darkest text-xs mt-1">10-11 august of <span class="text-blue-light">@ConcatenateConf</span> were the best days i ever had in my life. It was so fun i learned so many things and i met a lot of wonderful people. Thank you <span class="text-blue-light">@codebeast</span> <span class="text-blue-light">@sarah_edo</span> <span class="text-blue-light">@unicodeveloper</span> .See you next year 😊</p>
</div>
<div class="flex justify-stretch pr-3 py-2">
<div class="w-5/6">
<img class="rounded-l" src="https://pbs.twimg.com/media/DkZC56cXcAABuLk.jpg" alt="">
</div>
<div class="w-1/6 flex flex-col justify-stretch">
<img class="rounded-tr" src="https://pbs.twimg.com/media/DkZC56gXoAUqeqY.jpg" alt="">
<img src="https://pbs.twimg.com/media/DkZC56fW4AAHdx5.jpg" alt="">
<img class="rounded-br" src="https://pbs.twimg.com/media/DkZC56dWsAA_wgT.jpg" alt="">
</div>
</div>
<div class="flex items-center py-2 pl-1">
<div class="flex items-center pr-4">
<svg class="fill-current text-grey-darker h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z"/></svg>
<span class="ml-2 text-grey-darker text-xs font-semibold">6</span>
</div>
<div class="flex items-center px-6">
<svg class="fill-current text-grey-darker h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M634.828 363.799l-98.343 98.343c-4.686 4.686-12.284 4.686-16.971 0l-98.343-98.343c-4.686-4.686-4.686-12.284 0-16.971l5.656-5.656c4.686-4.686 12.284-4.686 16.971 0l68.202 68.2V128H260.024a11.996 11.996 0 0 1-8.485-3.515l-8-8c-7.56-7.56-2.206-20.485 8.485-20.485H520c13.255 0 24 10.745 24 24v289.372l68.201-68.201c4.686-4.686 12.284-4.686 16.971 0l5.656 5.656c4.686 4.687 4.686 12.285 0 16.972zm-246.367 23.716a12.002 12.002 0 0 0-8.485-3.515H128V102.628l68.201 68.2c4.686 4.686 12.284 4.686 16.97 0l5.657-5.657c4.686-4.686 4.687-12.284 0-16.971l-98.343-98.343c-4.686-4.686-12.284-4.686-16.971 0L5.172 148.201c-4.686 4.686-4.686 12.285 0 16.971l5.657 5.657c4.686 4.686 12.284 4.686 16.97 0L96 102.628V392c0 13.255 10.745 24 24 24h267.976c10.691 0 16.045-12.926 8.485-20.485l-8-8z"/></svg>
<span class="ml-2 text-grey-darker text-xs font-semibold">29</span>
</div>
<div class="flex items-center px-6">
<svg class="fill-current text-grey-darker h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M462.3 62.7c-54.5-46.4-136-38.7-186.6 13.5L256 96.6l-19.7-20.3C195.5 34.1 113.2 8.7 49.7 62.7c-62.8 53.6-66.1 149.8-9.9 207.8l193.5 199.8c6.2 6.4 14.4 9.7 22.6 9.7 8.2 0 16.4-3.2 22.6-9.7L472 270.5c56.4-58 53.1-154.2-9.7-207.8zm-13.1 185.6L256.4 448.1 62.8 248.3c-38.4-39.6-46.4-115.1 7.7-161.2 54.8-46.8 119.2-12.9 142.8 11.5l42.7 44.1 42.7-44.1c23.2-24 88.2-58 142.8-11.5 54 46 46.1 121.5 7.7 161.2z"/></svg>
<span class="ml-2 text-grey-darker text-xs font-semibold">162</span>
</div>
</div>
</div>
</div>
</div>
<div class="w-1/4 px-4 mt-6">
<div class="bg-white p-4 shadow">
<div>
<p class="font-bold text-black text-sm">Who To follow <span class="text-xs">-</span> <span class="font-thin text-xs text-blue-light">Refresh</span> <span class="text-xs">-</span> <span class="font-thin text-xs text-blue-light">View all</span></p>
</div>
<div class="flex items-center border-b border-grey py-4">
<div class="w-1/5">
<div class="h-12 w-12 bg-grey rounded-full">
</div>
</div>
<div class="w-4/5 pl-2">
<h3 class="font-semibold text-black text-sm">Spade <span class="text-grey-dark text-xs font-thin">@spade</span></h3>
<button class="mt-1 text-blue-light font-semibold text-sm py-1 px-6 border border-blue-light rounded-full">Follow</button>
</div>
</div>
<div class="flex items-center border-b border-grey py-4">
<div class="w-1/5">
<div class="h-12 w-12 bg-grey rounded-full">
</div>
</div>
<div class="w-4/5 pl-2">
<h3 class="font-semibold text-black text-sm">Spade <span class="text-grey-dark text-xs font-thin">@spade</span></h3>
<button class="mt-1 text-blue-light font-semibold text-sm py-1 px-6 border border-blue-light rounded-full">Follow</button>
</div>
</div>
<div class="flex items-center border-b border-grey py-4">
<div class="w-1/5">
<div class="h-12 w-12 bg-grey rounded-full">
</div>
</div>
<div class="w-4/5 pl-2">
<h3 class="font-semibold text-black text-sm">Spade <span class="text-grey-dark text-xs font-thin">@spade</span></h3>
<button class="mt-1 text-blue-light font-semibold text-sm py-1 px-6 border border-blue-light rounded-full">Follow</button>
</div>
</div>
<div class="pt-4 flex items-center">
<svg class="fill-current text-blue-light h-4 w-4" id="Bold" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>single-neutral</title><path d="M12,8.5A5.506,5.506,0,0,0,6.5,14v3.5A.5.5,0,0,0,7,18H8.81a.25.25,0,0,1,.249.229L9.5,23.542A.5.5,0,0,0,10,24h4a.5.5,0,0,0,.5-.458l.443-5.313A.25.25,0,0,1,15.19,18H17a.5.5,0,0,0,.5-.5V14A5.506,5.506,0,0,0,12,8.5Z"/><circle cx="12" cy="3.5" r="3.5"/><path d="M12,8.5A5.506,5.506,0,0,0,6.5,14v3.5A.5.5,0,0,0,7,18H8.81a.25.25,0,0,1,.249.229L9.5,23.542A.5.5,0,0,0,10,24h4a.5.5,0,0,0,.5-.458l.443-5.313A.25.25,0,0,1,15.19,18H17a.5.5,0,0,0,.5-.5V14A5.506,5.506,0,0,0,12,8.5Z"/><circle cx="12" cy="3.5" r="3.5"/></svg>
<span class="font-thin text-sm text-blue-light">Find friends</span>
</div>
</div>
<div class="bg-white shadow p-4 mt-4">
<div class="pb-4">
<p class="font-bold text-black text-sm">Trends <span class="text-xs">-</span> <span class="font-thin text-xs text-blue-light">Change</span></p>
</div>
<ul class="p-0 flex flex-col">
<li class="py-1 flex flex-col">
<a href="#" class="text-blue-light text-sm font-semibold">#SportInfDay</a>
<span class="text-grey-darker text-xs font-hairline">113 k Tweets</span>
</li>
<li class="py-1 flex flex-col">
<a href="#" class="text-blue-light text-sm font-semibold">#SportInfDay</a>
<span class="text-grey-darker text-xs font-hairline">113 k Tweets</span>
</li>
<li class="py-1 flex flex-col">
<a href="#" class="text-blue-light text-sm font-semibold">#SportInfDay</a>
<span class="text-grey-darker text-xs font-hairline">113 k Tweets</span>
</li>
<li class="py-1 flex flex-col">
<a href="#" class="text-blue-light text-sm font-semibold">#SportInfDay</a>
<span class="text-grey-darker text-xs font-hairline">113 k Tweets</span>
</li>
</ul>
</div>
<div class="mt-4 pr-10 ">
<p class="text-grey-darker text-xs leading-tight">© 2018 Twitter À propos Centre d'assistance Conditions Politique de confidentialité Cookies Informations sur la publicité</p>
</div>
</div>
</div>
</body>
</html>