<div
  class="w-full 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>
    <th:block th:text="#{widget.latestComments.title}"></th:block>
  </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="size-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="size-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="size-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="size-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="size-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>
