Card by Cybercom682

1<div class="space-y-2 p-4">
2  <div
3    role="alert"
4    class="bg-green-100 dark:bg-green-900 border-l-4 border-green-500 dark:border-green-700 text-green-900 dark:text-green-100 p-2 rounded-lg flex items-center transition duration-300 ease-in-out hover:bg-green-200 dark:hover:bg-green-800 transform hover:scale-105"
5  >
6    <svg
7      stroke="currentColor"
8      viewBox="0 0 24 24"
9      fill="none"
10      class="h-5 w-5 flex-shrink-0 mr-2 text-green-600"
11      xmlns="http://www.w3.org/2000/svg"
12    >
13      <path
14        d="M13 16h-1v-4h1m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
15        stroke-width="2"
16        stroke-linejoin="round"
17        stroke-linecap="round"
18      ></path>
19    </svg>
20    <p class="text-xs font-semibold">Success - Everything went smoothly!</p>
21  </div>
22
23  <div
24    role="alert"
25    class="bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 dark:border-blue-700 text-blue-900 dark:text-blue-100 p-2 rounded-lg flex items-center transition duration-300 ease-in-out hover:bg-blue-200 dark:hover:bg-blue-800 transform hover:scale-105"
26  >
27    <svg
28      stroke="currentColor"
29      viewBox="0 0 24 24"
30      fill="none"
31      class="h-5 w-5 flex-shrink-0 mr-2 text-blue-600"
32      xmlns="http://www.w3.org/2000/svg"
33    >
34      <path
35        d="M13 16h-1v-4h1m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
36        stroke-width="2"
37        stroke-linejoin="round"
38        stroke-linecap="round"
39      ></path>
40    </svg>
41    <p class="text-xs font-semibold">
42      Info - This is some information for you.
43    </p>
44  </div>
45
46  <div
47    role="alert"
48    class="bg-yellow-100 dark:bg-yellow-900 border-l-4 border-yellow-500 dark:border-yellow-700 text-yellow-900 dark:text-yellow-100 p-2 rounded-lg flex items-center transition duration-300 ease-in-out hover:bg-yellow-200 dark:hover:bg-yellow-800 transform hover:scale-105"
49  >
50    <svg
51      stroke="currentColor"
52      viewBox="0 0 24 24"
53      fill="none"
54      class="h-5 w-5 flex-shrink-0 mr-2 text-yellow-600"
55      xmlns="http://www.w3.org/2000/svg"
56    >
57      <path
58        d="M13 16h-1v-4h1m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
59        stroke-width="2"
60        stroke-linejoin="round"
61        stroke-linecap="round"
62      ></path>
63    </svg>
64    <p class="text-xs font-semibold">
65      Warning - Be careful with this next step.
66    </p>
67  </div>
68
69  <div
70    role="alert"
71    class="bg-red-100 dark:bg-red-900 border-l-4 border-red-500 dark:border-red-700 text-red-900 dark:text-red-100 p-2 rounded-lg flex items-center transition duration-300 ease-in-out hover:bg-red-200 dark:hover:bg-red-800 transform hover:scale-105"
72  >
73    <svg
74      stroke="currentColor"
75      viewBox="0 0 24 24"
76      fill="none"
77      class="h-5 w-5 flex-shrink-0 mr-2 text-red-600"
78      xmlns="http://www.w3.org/2000/svg"
79    >
80      <path
81        d="M13 16h-1v-4h1m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
82        stroke-width="2"
83        stroke-linejoin="round"
84        stroke-linecap="round"
85      ></path>
86    </svg>
87    <p class="text-xs font-semibold">Error - Something went wrong.</p>
88  </div>
89</div>
90