forked from thedevdojo/tails-components
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcomment-thread.html
69 lines (66 loc) · 7.86 KB
/
comment-thread.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
<section class="min-w-screen min-h-screen flex items-center justify-center bg-white relative bg-gray-100 antialiased">
<div class="container mx-auto px-0 sm:px-5">
<div class="flex-col border-r-2 border-b-2 border-gray-200 sm:px-4 sm:py-4 md:px-4 py-4 bg-white sm:rounded-lg sm:shadow-sm w-full md:w-2/3 mx-auto">
<div class="flex flex-row">
<img class="h-12 w-12 border-2 border-gray-300 rounded-full object-cover" src="https://images.unsplash.com/photo-1517070208541-6ddc4d3efbcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&faces=1&faceindex=1&facepad=2.5&w=500&h=500&q=80">
<div class="flex-col mt-1">
<div class="flex-1 px-4 font-bold flex items-center leading-tight">Noob master
<span class="text-xs text-gray-500 font-normal ml-2">2 weeks ago</span>
</div>
<div class="flex-1 px-2 ml-2 text-gray-600 text-sm font-medium leading-loose">Wow!!! how you did you create this?
</div>
<button class="flex-column px-1 ml-1 inline-flex items-center pt-2">
<svg class="w-5 h-5 ml-2 text-gray-600 hover:text-gray-900 cursor-pointer fill-current" viewBox="0 0 95 78" xmlns="http://www.w3.org/2000/svg">
<path d="M29.58 0c1.53.064 2.88 1.47 2.879 3v11.31c19.841.769 34.384 8.902 41.247 20.464 7.212 12.15 5.505 27.83-6.384 40.273-.987 1.088-2.82 1.274-4.005.405-1.186-.868-1.559-2.67-.814-3.936 4.986-9.075 2.985-18.092-3.13-24.214-5.775-5.78-15.377-8.782-26.914-5.53V53.99c-.01 1.167-.769 2.294-1.848 2.744-1.08.45-2.416.195-3.253-.62L.85 30.119c-1.146-1.124-1.131-3.205.032-4.312L27.389.812c.703-.579 1.49-.703 2.19-.812zm-3.13 9.935L7.297 27.994l19.153 18.84v-7.342c-.002-1.244.856-2.442 2.034-2.844 14.307-4.882 27.323-1.394 35.145 6.437 3.985 3.989 6.581 9.143 7.355 14.715 2.14-6.959 1.157-13.902-2.441-19.964-5.89-9.92-19.251-17.684-39.089-17.684-1.573 0-3.004-1.429-3.004-3V9.936z" fill-rule="nonzero" /></svg>
</button>
<button class="flex-column -ml-1 px-1 inline-flex items-center">
<svg class="w-5 h-5 text-gray-600 hover:text-gray-700 cursor-pointer" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"></path>
</svg>
</button>
</div>
</div>
<hr class="ml-16 my-2 border-gray-200">
<div class="flex flex-row md-10 md:ml-16 pt-1">
<img class="h-12 w-12 border-2 border-gray-300 rounded-full" src="https://images.unsplash.com/photo-1581624657276-5807462d0a3a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&fit=facearea&faces=1&faceindex=1&facepad=2.5&w=500&h=500&q=80">
<div class="flex-col mt-1">
<div class="flex-1 px-4 font-bold flex items-center leading-tight">Emily
<span class="text-xs text-gray-500 font-normal ml-2">5 days ago</span>
</div>
<div class="flex-1 px-2 ml-2 text-gray-600 text-sm font-medium leading-loose">I created it using TailwindCSS
</div>
<button class="flex-column px-1 ml-1 inline-flex items-center pt-2">
<svg class="w-5 h-5 ml-2 text-gray-600 hover:text-gray-900 cursor-pointer fill-current" viewBox="0 0 95 78" xmlns="http://www.w3.org/2000/svg">
<path d="M29.58 0c1.53.064 2.88 1.47 2.879 3v11.31c19.841.769 34.384 8.902 41.247 20.464 7.212 12.15 5.505 27.83-6.384 40.273-.987 1.088-2.82 1.274-4.005.405-1.186-.868-1.559-2.67-.814-3.936 4.986-9.075 2.985-18.092-3.13-24.214-5.775-5.78-15.377-8.782-26.914-5.53V53.99c-.01 1.167-.769 2.294-1.848 2.744-1.08.45-2.416.195-3.253-.62L.85 30.119c-1.146-1.124-1.131-3.205.032-4.312L27.389.812c.703-.579 1.49-.703 2.19-.812zm-3.13 9.935L7.297 27.994l19.153 18.84v-7.342c-.002-1.244.856-2.442 2.034-2.844 14.307-4.882 27.323-1.394 35.145 6.437 3.985 3.989 6.581 9.143 7.355 14.715 2.14-6.959 1.157-13.902-2.441-19.964-5.89-9.92-19.251-17.684-39.089-17.684-1.573 0-3.004-1.429-3.004-3V9.936z" fill-rule="nonzero" /></svg>
</button>
<button class="flex-column -ml-1 px-1 inline-flex items-center">
<svg class="w-5 h-5 text-gray-600 hover:text-gray-700 cursor-pointer" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="flex-col border-r-2 border-b-2 border-gray-200 mt-3 sm:px-4 sm:py-4 md:px-4 py-4 bg-white sm:rounded-lg sm:shadow-sm w-full md:w-2/3 mx-auto">
<div class="flex flex-row md-10">
<img class="h-12 w-12 border-2 border-gray-300 rounded-full" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&faces=1&faceindex=1&facepad=2.5&w=500&h=500&q=80">
<div class="flex-col mt-1">
<div class="flex-1 px-4 font-bold flex items-center leading-tight">Anonymous
<span class="text-xs text-gray-500 font-normal ml-2">3 days ago</span>
</div>
<div class="flex-1 px-2 ml-2 text-gray-600 text-sm font-medium leading-loose">Very cool! I'll have to learn more about Tailwind.
</div>
<button class="flex-column px-1 ml-1 inline-flex items-center pt-2">
<svg class="w-5 h-5 ml-2 text-gray-600 hover:text-gray-900 cursor-pointer fill-current" viewBox="0 0 95 78" xmlns="http://www.w3.org/2000/svg">
<path d="M29.58 0c1.53.064 2.88 1.47 2.879 3v11.31c19.841.769 34.384 8.902 41.247 20.464 7.212 12.15 5.505 27.83-6.384 40.273-.987 1.088-2.82 1.274-4.005.405-1.186-.868-1.559-2.67-.814-3.936 4.986-9.075 2.985-18.092-3.13-24.214-5.775-5.78-15.377-8.782-26.914-5.53V53.99c-.01 1.167-.769 2.294-1.848 2.744-1.08.45-2.416.195-3.253-.62L.85 30.119c-1.146-1.124-1.131-3.205.032-4.312L27.389.812c.703-.579 1.49-.703 2.19-.812zm-3.13 9.935L7.297 27.994l19.153 18.84v-7.342c-.002-1.244.856-2.442 2.034-2.844 14.307-4.882 27.323-1.394 35.145 6.437 3.985 3.989 6.581 9.143 7.355 14.715 2.14-6.959 1.157-13.902-2.441-19.964-5.89-9.92-19.251-17.684-39.089-17.684-1.573 0-3.004-1.429-3.004-3V9.936z" fill-rule="nonzero" /></svg>
</button>
<button class="flex-column -ml-1 px-1 inline-flex items-center">
<svg class="w-5 h-5 text-gray-600 hover:text-gray-700 cursor-pointer" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>