Card by mobinkakei
#e8e8e8
HTML +TailwindCSS
1<div 2 class="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 xmlns="http://www.w3.org/2000/svg" 8 class="w-12 h-12 flex items-center text-gray-600 mx-auto" 9 viewBox="0 0 20 20" 10 fill="currentColor" 11 > 12 <path 13 fill-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 clip-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="text-sm text-gray-500 px-2"> 20 Do you really want to delete your account? 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-green-400 hover:bg-green-500 px-5 ml-4 py-2 text-sm shadow-sm hover:shadow-lg font-medium tracking-wider border-2 border-green-300 hover:border-green-500 text-white rounded-full transition ease-in duration-300" 31 > 32 Confirm 33 </button> 34 </div> 35 </div> 36</div> 37
1K views
1K views
Variations
1 MIT License