You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
406 lines
17 KiB
HTML
406 lines
17 KiB
HTML
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
|
<ul role="list" class="space-y-6">
|
|
<li class="relative flex gap-x-4">
|
|
<div class="absolute top-0 -bottom-6 left-0 flex w-6 justify-center">
|
|
<div class="w-px bg-gray-200"></div>
|
|
</div>
|
|
<div
|
|
class="relative flex size-6 flex-none items-center justify-center bg-white"
|
|
>
|
|
<div class="size-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300"></div>
|
|
</div>
|
|
<p class="flex-auto py-0.5 text-xs/5 text-gray-500">
|
|
<span class="font-medium text-gray-900">Chelsea Hagon</span> created the
|
|
invoice.
|
|
</p>
|
|
<time
|
|
datetime="2023-01-23T10:32"
|
|
class="flex-none py-0.5 text-xs/5 text-gray-500"
|
|
>7d ago</time
|
|
>
|
|
</li>
|
|
<li class="relative flex gap-x-4">
|
|
<div class="absolute top-0 -bottom-6 left-0 flex w-6 justify-center">
|
|
<div class="w-px bg-gray-200"></div>
|
|
</div>
|
|
<div
|
|
class="relative flex size-6 flex-none items-center justify-center bg-white"
|
|
>
|
|
<div class="size-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300"></div>
|
|
</div>
|
|
<p class="flex-auto py-0.5 text-xs/5 text-gray-500">
|
|
<span class="font-medium text-gray-900">Chelsea Hagon</span> edited the
|
|
invoice.
|
|
</p>
|
|
<time
|
|
datetime="2023-01-23T11:03"
|
|
class="flex-none py-0.5 text-xs/5 text-gray-500"
|
|
>6d ago</time
|
|
>
|
|
</li>
|
|
<li class="relative flex gap-x-4">
|
|
<div class="absolute top-0 -bottom-6 left-0 flex w-6 justify-center">
|
|
<div class="w-px bg-gray-200"></div>
|
|
</div>
|
|
<div
|
|
class="relative flex size-6 flex-none items-center justify-center bg-white"
|
|
>
|
|
<div class="size-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300"></div>
|
|
</div>
|
|
<p class="flex-auto py-0.5 text-xs/5 text-gray-500">
|
|
<span class="font-medium text-gray-900">Chelsea Hagon</span> sent the
|
|
invoice.
|
|
</p>
|
|
<time
|
|
datetime="2023-01-23T11:24"
|
|
class="flex-none py-0.5 text-xs/5 text-gray-500"
|
|
>6d ago</time
|
|
>
|
|
</li>
|
|
<li class="relative flex gap-x-4">
|
|
<div class="absolute top-0 -bottom-6 left-0 flex w-6 justify-center">
|
|
<div class="w-px bg-gray-200"></div>
|
|
</div>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="relative mt-3 size-6 flex-none rounded-full bg-gray-50"
|
|
/>
|
|
<div class="flex-auto rounded-md p-3 ring-1 ring-gray-200 ring-inset">
|
|
<div class="flex justify-between gap-x-4">
|
|
<div class="py-0.5 text-xs/5 text-gray-500">
|
|
<span class="font-medium text-gray-900">Chelsea Hagon</span>
|
|
commented
|
|
</div>
|
|
<time
|
|
datetime="2023-01-23T15:56"
|
|
class="flex-none py-0.5 text-xs/5 text-gray-500"
|
|
>3d ago</time
|
|
>
|
|
</div>
|
|
<p class="text-sm/6 text-gray-500">
|
|
Called client, they reassured me the invoice would be paid by the 25th.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li class="relative flex gap-x-4">
|
|
<div class="absolute top-0 -bottom-6 left-0 flex w-6 justify-center">
|
|
<div class="w-px bg-gray-200"></div>
|
|
</div>
|
|
<div
|
|
class="relative flex size-6 flex-none items-center justify-center bg-white"
|
|
>
|
|
<div class="size-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300"></div>
|
|
</div>
|
|
<p class="flex-auto py-0.5 text-xs/5 text-gray-500">
|
|
<span class="font-medium text-gray-900">Alex Curren</span> viewed the
|
|
invoice.
|
|
</p>
|
|
<time
|
|
datetime="2023-01-24T09:12"
|
|
class="flex-none py-0.5 text-xs/5 text-gray-500"
|
|
>2d ago</time
|
|
>
|
|
</li>
|
|
<li class="relative flex gap-x-4">
|
|
<div class="absolute top-0 left-0 flex h-6 w-6 justify-center">
|
|
<div class="w-px bg-gray-200"></div>
|
|
</div>
|
|
<div
|
|
class="relative flex size-6 flex-none items-center justify-center bg-white"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-6 text-indigo-600"
|
|
>
|
|
<path
|
|
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
|
|
clip-rule="evenodd"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<p class="flex-auto py-0.5 text-xs/5 text-gray-500">
|
|
<span class="font-medium text-gray-900">Alex Curren</span> paid the
|
|
invoice.
|
|
</p>
|
|
<time
|
|
datetime="2023-01-24T09:20"
|
|
class="flex-none py-0.5 text-xs/5 text-gray-500"
|
|
>1d ago</time
|
|
>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- New comment form -->
|
|
<div class="mt-6 flex gap-x-3">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-6 flex-none rounded-full bg-gray-50"
|
|
/>
|
|
<form action="#" class="relative flex-auto">
|
|
<div
|
|
class="overflow-hidden rounded-lg pb-12 outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600"
|
|
>
|
|
<label for="comment" class="sr-only">Add your comment</label>
|
|
<textarea
|
|
id="comment"
|
|
name="comment"
|
|
rows="2"
|
|
placeholder="Add your comment..."
|
|
class="block w-full resize-none bg-transparent px-3 py-1.5 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div
|
|
class="absolute inset-x-0 bottom-0 flex justify-between py-2 pr-2 pl-3"
|
|
>
|
|
<div class="flex items-center space-x-5">
|
|
<div class="flex items-center">
|
|
<button
|
|
type="button"
|
|
class="-m-2.5 flex size-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5"
|
|
>
|
|
<path
|
|
d="M15.621 4.379a3 3 0 0 0-4.242 0l-7 7a3 3 0 0 0 4.241 4.243h.001l.497-.5a.75.75 0 0 1 1.064 1.057l-.498.501-.002.002a4.5 4.5 0 0 1-6.364-6.364l7-7a4.5 4.5 0 0 1 6.368 6.36l-3.455 3.553A2.625 2.625 0 1 1 9.52 9.52l3.45-3.451a.75.75 0 1 1 1.061 1.06l-3.45 3.451a1.125 1.125 0 0 0 1.587 1.595l3.454-3.553a3 3 0 0 0 0-4.242Z"
|
|
clip-rule="evenodd"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span class="sr-only">Attach a file</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<el-select name="selected" value="">
|
|
<button
|
|
type="button"
|
|
aria-label="Your mood"
|
|
class="relative -m-2.5 flex size-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500"
|
|
>
|
|
<el-selectedcontent class="flex items-center justify-center">
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 shrink-0"
|
|
>
|
|
<path
|
|
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.536-4.464a.75.75 0 1 0-1.061-1.061 3.5 3.5 0 0 1-4.95 0 .75.75 0 0 0-1.06 1.06 5 5 0 0 0 7.07 0ZM9 8.5c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S7.448 7 8 7s1 .672 1 1.5Zm3 1.5c.552 0 1-.672 1-1.5S12.552 7 12 7s-1 .672-1 1.5.448 1.5 1 1.5Z"
|
|
clip-rule="evenodd"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span class="sr-only">Add your mood</span>
|
|
</el-selectedcontent>
|
|
</button>
|
|
|
|
<el-options
|
|
anchor="top start"
|
|
popover
|
|
class="-ml-3.5 w-60 rounded-lg bg-white py-3 text-base shadow-sm ring-1 ring-black/5 focus:outline-hidden data-leave:transition data-leave:transition-discrete data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0 sm:ml-2.5 sm:w-64 sm:text-sm"
|
|
>
|
|
<el-option
|
|
value="excited"
|
|
class="relative block cursor-default bg-white px-3 py-2 select-none focus:bg-gray-100 focus:outline-hidden"
|
|
>
|
|
<div class="flex items-center">
|
|
<div
|
|
class="flex size-8 items-center justify-center rounded-full bg-red-500"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 shrink-0 text-white"
|
|
>
|
|
<path
|
|
d="M13.5 4.938a7 7 0 1 1-9.006 1.737c.202-.257.59-.218.793.039.278.352.594.672.943.954.332.269.786-.049.773-.476a5.977 5.977 0 0 1 .572-2.759 6.026 6.026 0 0 1 2.486-2.665c.247-.14.55-.016.677.238A6.967 6.967 0 0 0 13.5 4.938ZM14 12a4 4 0 0 1-4 4c-1.913 0-3.52-1.398-3.91-3.182-.093-.429.44-.643.814-.413a4.043 4.043 0 0 0 1.601.564c.303.038.531-.24.51-.544a5.975 5.975 0 0 1 1.315-4.192.447.447 0 0 1 .431-.16A4.001 4.001 0 0 1 14 12Z"
|
|
clip-rule="evenodd"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span
|
|
class="ml-3 block truncate font-medium in-[el-selectedcontent]:hidden"
|
|
>Excited</span
|
|
>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="loved"
|
|
class="relative block cursor-default bg-white px-3 py-2 select-none focus:bg-gray-100 focus:outline-hidden"
|
|
>
|
|
<div class="flex items-center">
|
|
<div
|
|
class="flex size-8 items-center justify-center rounded-full bg-pink-400"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 shrink-0 text-white"
|
|
>
|
|
<path
|
|
d="m9.653 16.915-.005-.003-.019-.01a20.759 20.759 0 0 1-1.162-.682 22.045 22.045 0 0 1-2.582-1.9C4.045 12.733 2 10.352 2 7.5a4.5 4.5 0 0 1 8-2.828A4.5 4.5 0 0 1 18 7.5c0 2.852-2.044 5.233-3.885 6.82a22.049 22.049 0 0 1-3.744 2.582l-.019.01-.005.003h-.002a.739.739 0 0 1-.69.001l-.002-.001Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span
|
|
class="ml-3 block truncate font-medium in-[el-selectedcontent]:hidden"
|
|
>Loved</span
|
|
>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="happy"
|
|
class="relative block cursor-default bg-white px-3 py-2 select-none focus:bg-gray-100 focus:outline-hidden"
|
|
>
|
|
<div class="flex items-center">
|
|
<div
|
|
class="flex size-8 items-center justify-center rounded-full bg-green-400"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 shrink-0 text-white"
|
|
>
|
|
<path
|
|
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.536-4.464a.75.75 0 1 0-1.061-1.061 3.5 3.5 0 0 1-4.95 0 .75.75 0 0 0-1.06 1.06 5 5 0 0 0 7.07 0ZM9 8.5c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S7.448 7 8 7s1 .672 1 1.5Zm3 1.5c.552 0 1-.672 1-1.5S12.552 7 12 7s-1 .672-1 1.5.448 1.5 1 1.5Z"
|
|
clip-rule="evenodd"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span
|
|
class="ml-3 block truncate font-medium in-[el-selectedcontent]:hidden"
|
|
>Happy</span
|
|
>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="sad"
|
|
class="relative block cursor-default bg-white px-3 py-2 select-none focus:bg-gray-100 focus:outline-hidden"
|
|
>
|
|
<div class="flex items-center">
|
|
<div
|
|
class="flex size-8 items-center justify-center rounded-full bg-yellow-400"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 shrink-0 text-white"
|
|
>
|
|
<path
|
|
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm-3.536-3.475a.75.75 0 0 0 1.061 0 3.5 3.5 0 0 1 4.95 0 .75.75 0 1 0 1.06-1.06 5 5 0 0 0-7.07 0 .75.75 0 0 0 0 1.06ZM9 8.5c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S7.448 7 8 7s1 .672 1 1.5Zm3 1.5c.552 0 1-.672 1-1.5S12.552 7 12 7s-1 .672-1 1.5.448 1.5 1 1.5Z"
|
|
clip-rule="evenodd"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span
|
|
class="ml-3 block truncate font-medium in-[el-selectedcontent]:hidden"
|
|
>Sad</span
|
|
>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value="thumbsy"
|
|
class="relative block cursor-default bg-white px-3 py-2 select-none focus:bg-gray-100 focus:outline-hidden"
|
|
>
|
|
<div class="flex items-center">
|
|
<div
|
|
class="flex size-8 items-center justify-center rounded-full bg-blue-500"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 shrink-0 text-white"
|
|
>
|
|
<path
|
|
d="M1 8.25a1.25 1.25 0 1 1 2.5 0v7.5a1.25 1.25 0 1 1-2.5 0v-7.5ZM11 3V1.7c0-.268.14-.526.395-.607A2 2 0 0 1 14 3c0 .995-.182 1.948-.514 2.826-.204.54.166 1.174.744 1.174h2.52c1.243 0 2.261 1.01 2.146 2.247a23.864 23.864 0 0 1-1.341 5.974C17.153 16.323 16.072 17 14.9 17h-3.192a3 3 0 0 1-1.341-.317l-2.734-1.366A3 3 0 0 0 6.292 15H5V8h.963c.685 0 1.258-.483 1.612-1.068a4.011 4.011 0 0 1 2.166-1.73c.432-.143.853-.386 1.011-.814.16-.432.248-.9.248-1.388Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span
|
|
class="ml-3 block truncate font-medium in-[el-selectedcontent]:hidden"
|
|
>Thumbsy</span
|
|
>
|
|
</div>
|
|
</el-option>
|
|
<el-option
|
|
value=""
|
|
class="relative block cursor-default bg-white px-3 py-2 select-none focus:bg-gray-100 focus:outline-hidden"
|
|
>
|
|
<div class="flex items-center">
|
|
<div
|
|
class="flex size-8 items-center justify-center rounded-full bg-transparent in-[el-selectedcontent]:hidden"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 shrink-0 text-gray-400"
|
|
>
|
|
<path
|
|
d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span class="hidden in-[el-selectedcontent]:inline">
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 shrink-0"
|
|
>
|
|
<path
|
|
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.536-4.464a.75.75 0 1 0-1.061-1.061 3.5 3.5 0 0 1-4.95 0 .75.75 0 0 0-1.06 1.06 5 5 0 0 0 7.07 0ZM9 8.5c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S7.448 7 8 7s1 .672 1 1.5Zm3 1.5c.552 0 1-.672 1-1.5S12.552 7 12 7s-1 .672-1 1.5.448 1.5 1 1.5Z"
|
|
clip-rule="evenodd"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span class="sr-only">Add your mood</span>
|
|
</span>
|
|
<span
|
|
class="ml-3 block truncate font-medium in-[el-selectedcontent]:hidden"
|
|
>I feel nothing</span
|
|
>
|
|
</div>
|
|
</el-option>
|
|
</el-options>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
class="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50"
|
|
>
|
|
Comment
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|