Card by alexruix

1<div
2  role="alert"
3  class="mx-auto max-w-lg rounded-lg border border-stone bg-stone-100 p-4 shadow-lg sm:p-6 lg:p-8"
4>
5  <div class="flex items-center gap-4">
6    <span class="shrink-0 rounded-full bg-emerald-400 p-2 text-white">
7      <svg
8        xmlns="http://www.w3.org/2000/svg"
9        viewBox="0 0 20 20"
10        fill="currentColor"
11        class="h-4 w-4"
12      >
13        <path
14          fill-rule="evenodd"
15          d="M18 3a1 1 0 00-1.447-.894L8.763 6H5a3 3 0 000 6h.28l1.771 5.316A1 1 0 008 18h1a1 1 0 001-1v-4.382l6.553 3.276A1 1 0 0018 15V3z"
16          clip-rule="evenodd"
17        ></path>
18      </svg>
19    </span>
20
21    <p class="font-medium sm:text-lg text-emerald-600">New notification!</p>
22  </div>
23
24  <p class="mt-4 text-gray-600">
25    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
26    tempor incididunt ut labore et dolore?
27  </p>
28
29  <div class="mt-6 sm:flex sm:gap-4">
30    <a
31      href="#"
32      class="inline-block w-full rounded-lg bg-emerald-500 px-5 py-3 text-center text-sm font-semibold text-white sm:w-auto"
33    >
34      View
35    </a>
36
37    <a
38      href="#"
39      class="mt-2 inline-block w-full rounded-lg bg-stone-300 px-5 py-3 text-center text-sm font-semibold text-gray-800 sm:mt-0 sm:w-auto"
40    >
41      Dismiss
42    </a>
43  </div>
44</div>
45