77 lines
3.4 KiB
HTML
77 lines
3.4 KiB
HTML
<div
|
|
class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md dark:bg-slate-800"
|
|
>
|
|
<h2 class="inline-flex items-center gap-2 text-base dark:text-slate-50">
|
|
<span class="i-tabler-message-circle text-lg"></span>
|
|
最新评论
|
|
</h2>
|
|
<div>
|
|
<ul role="list" class="divide-y divide-gray-100 dark:divide-slate-700">
|
|
<li class="py-3">
|
|
<div class="flex space-x-3">
|
|
<img class="h-6 w-6 rounded-full" src="https://ryanc.cc/avatar" alt="Comment Avatar" />
|
|
<div class="flex-1 space-y-1">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-sm font-medium dark:text-slate-100">Phyllis McKenzie</h3>
|
|
<p class="text-sm text-gray-500 dark:text-slate-500">1h</p>
|
|
</div>
|
|
<p class="text-sm text-gray-500 dark:text-slate-400">
|
|
Fugit quae nam dolores impedit quia fuga pariatur dignissimos recusandae.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="py-3">
|
|
<div class="flex space-x-3">
|
|
<img class="h-6 w-6 rounded-full" src="https://ryanc.cc/avatar" alt="Comment Avatar" />
|
|
<div class="flex-1 space-y-1">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-sm font-medium dark:text-slate-100">Willard Labadie I</h3>
|
|
<p class="text-sm text-gray-500 dark:text-slate-500">1h</p>
|
|
</div>
|
|
<p class="text-sm text-gray-500 dark:text-slate-400">
|
|
Officiis quis quos repudiandae quam delectus impedit quidem amet ut.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="py-3">
|
|
<div class="flex space-x-3">
|
|
<img class="h-6 w-6 rounded-full" src="https://ryanc.cc/avatar" alt="Comment Avatar" />
|
|
<div class="flex-1 space-y-1">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-sm font-medium dark:text-slate-100">Miss Leonard Sporer</h3>
|
|
<p class="text-sm text-gray-500 dark:text-slate-500">1h</p>
|
|
</div>
|
|
<p class="text-sm text-gray-500 dark:text-slate-400">Nesciunt dolores et debitis.</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="py-3">
|
|
<div class="flex space-x-3">
|
|
<img class="h-6 w-6 rounded-full" src="https://ryanc.cc/avatar" alt="Comment Avatar" />
|
|
<div class="flex-1 space-y-1">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-sm font-medium dark:text-slate-100">Tyrone Fisher</h3>
|
|
<p class="text-sm text-gray-500 dark:text-slate-500">1h</p>
|
|
</div>
|
|
<p class="text-sm text-gray-500 dark:text-slate-400">Et nesciunt dolorem eum ut corporis.</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="py-3">
|
|
<div class="flex space-x-3">
|
|
<img class="h-6 w-6 rounded-full" src="https://ryanc.cc/avatar" alt="Comment Avatar" />
|
|
<div class="flex-1 space-y-1">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-sm font-medium dark:text-slate-100">Angie Braun V</h3>
|
|
<p class="text-sm text-gray-500 dark:text-slate-500">1h</p>
|
|
</div>
|
|
<p class="text-sm text-gray-500 dark:text-slate-400">Autem labore ipsam earum reiciendis eum omnis.</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|