Card by 3bdel3ziz-T

1<div
2  class="group select-none w-[250px] flex flex-col p-4 relative items-center justify-center bg-gray-800 border border-gray-800 shadow-lg rounded-2xl"
3>
4  <div class="">
5    <div class="text-center p-3 flex-auto justify-center">
6      <svg
7        fill="currentColor"
8        viewBox="0 0 20 20"
9        class="group-hover:animate-bounce w-12 h-12 flex items-center text-gray-600 fill-red-500 mx-auto"
10        xmlns="http://www.w3.org/2000/svg"
11      >
12        <path
13          clip-rule="evenodd"
14          d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
15          fill-rule="evenodd"
16        ></path>
17      </svg>
18      <h2 class="text-xl font-bold py-4 text-gray-200">Are you sure?</h2>
19      <p class="font-bold text-sm text-gray-500 px-2">
20        Do you really want to continue ? This process cannot be undone
21      </p>
22    </div>
23    <div class="p-2 mt-2 text-center space-x-1 md:block">
24      <button
25        class="mb-2 md:mb-0 bg-gray-700 px-5 py-2 text-sm shadow-sm font-medium tracking-wider border-2 border-gray-600 hover:border-gray-700 text-gray-300 rounded-full hover:shadow-lg hover:bg-gray-800 transition ease-in duration-300"
26      >
27        Cancel
28      </button>
29      <button
30        class="bg-red-500 hover:bg-transparent px-5 ml-4 py-2 text-sm shadow-sm hover:shadow-lg font-medium tracking-wider border-2 border-red-500 hover:border-red-500 text-white hover:text-red-500 rounded-full transition ease-in duration-300"
31      >
32        Confirm
33      </button>
34    </div>
35  </div>
36</div>
37