Card Rate your experience

<div class="max-w-sm mx-auto p-5 my-12 md:my-20 bg-white dark:bg-neutral-900 rounded-lg shadow-lg"> <div class="mt-2 text-center"> <!-- TITLE --> <h3 class="text-2xl font-semibold leading-6 text-violet-600 dark:text-violet-500"> Rate your experience </h3> <!-- DESCRIPTION --> <div class="mt-2"> <p class="px-3 text-sm leading-5 text-gray-600 dark:text-gray-400"> We would love to know what you think of our service! Please take a moment to rate us. </p> </div> <!-- RATING ICONS --> <div class="flex flex-wrap items-center justify-center mt-2"> <div class="flex-initial"> <svg class="w-12 text-gray-600 transition-all duration-300 ease-out transform fill-current stroke-current hover:text-violet-600 hover:scale-110" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg"> <title>Very Disappointed</title> <g id="line"> <circle cx="36" cy="36" r="23" fill="none" stroke-miterlimit="10" stroke-width="2"></circle> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M28,46c1.5805-2.5575,4.9043-4.1349,8.4211-4.0038C39.6499,42.1166,42.5622,43.6595,44,46"></path> <path d="M30,32.9252c0,1.6567-1.3448,3-3,3c-1.6553,0-3-1.3433-3-3c0-1.6553,1.3447-3,3-3C28.6552,29.9252,30,31.27,30,32.9252"></path> <path d="M48,32.9252c0,1.6567-1.3447,3-3,3s-3-1.3433-3-3c0-1.6553,1.3447-3,3-3S48,31.27,48,32.9252"></path> <line x1="23" x2="30" y1="24" y2="28" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"></line> <line x1="49" x2="42" y1="24" y2="28" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"></line> </g> </svg> </div> <div class="flex-initial"> <svg class="w-12 text-gray-600 transition-all duration-300 ease-out transform fill-current stroke-current hover:text-violet-600 hover:scale-110" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg"> <title>Disappointed</title> <g id="line"> <circle cx="36" cy="36" r="23" fill="none" stroke-miterlimit="10" stroke-width="2"></circle> <path d="M30,31c0,1.6568-1.3448,3-3,3c-1.6553,0-3-1.3433-3-3c0-1.6552,1.3447-3,3-3C28.6552,28,30,29.3448,30,31"></path> <path d="M48,31c0,1.6568-1.3447,3-3,3s-3-1.3433-3-3c0-1.6552,1.3447-3,3-3S48,29.3448,48,31"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M28,46c1.5805-2.5575,4.9043-4.1349,8.4211-4.0038C39.6499,42.1166,42.5622,43.6595,44,46"></path> </g> </svg> </div> <div class="flex-initial"> <svg class="w-12 text-gray-600 transition-all duration-300 ease-out transform fill-current stroke-current hover:text-violet-600 hover:scale-110" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg"> <title>Neutral</title> <g id="line"> <circle cx="36" cy="36" r="23" fill="none" stroke-miterlimit="10" stroke-width="2"></circle> <line x1="27" x2="45" y1="43" y2="43" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"></line> <path d="M30,31c0,1.6568-1.3448,3-3,3c-1.6553,0-3-1.3433-3-3c0-1.6552,1.3447-3,3-3C28.6552,28,30,29.3448,30,31"></path> <path d="M48,31c0,1.6568-1.3447,3-3,3s-3-1.3433-3-3c0-1.6552,1.3447-3,3-3S48,29.3448,48,31"></path> </g> </svg> </div> <div class="flex-initial"> <svg class="w-12 text-gray-600 transition-all duration-300 ease-out transform fill-current stroke-current hover:text-violet-600 hover:scale-110" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg"> <title>Happy</title> <g id="line"> <circle cx="36" cy="36" r="23" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M45.8147,45.2268a15.4294,15.4294,0,0,1-19.6294,0"></path> <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M31.6941,33.4036a4.7262,4.7262,0,0,0-8.6382,0"></path> <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M48.9441,33.4036a4.7262,4.7262,0,0,0-8.6382,0"></path> </g> </svg> </div> <div class="flex-initial"> <svg class="w-12 text-gray-600 transition-all duration-300 ease-out transform fill-current stroke-current hover:text-violet-600 hover:scale-110" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg"> <title>Very Happy</title> <g id="line"> <circle cx="36" cy="36" r="23" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M50.595,41.64a11.5554,11.5554,0,0,1-.87,4.49c-12.49,3.03-25.43.34-27.49-.13a11.4347,11.4347,0,0,1-.83-4.36h.11s14.8,3.59,28.89.07Z"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M49.7251,46.13c-1.79,4.27-6.35,7.23-13.69,7.23-7.41,0-12.03-3.03-13.8-7.36C24.2951,46.47,37.235,49.16,49.7251,46.13Z"></path> <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M31.6941,32.4036a4.7262,4.7262,0,0,0-8.6382,0"></path> <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M48.9441,32.4036a4.7262,4.7262,0,0,0-8.6382,0"></path> </g> </svg> </div> </div> </div> <!-- BUTTONS --> <div class="px-4 py-3 sm:px-6 sm:flex sm:justify-center sm:flex-row-reverse"> <!-- SUBMIT BUTTON --> <div class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto"> <button type="button" class="inline-flex justify-center w-full px-4 py-2 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-violet-600 border border-transparent rounded-md shadow-sm hover:bg-violet-500 sm:text-sm sm:leading-5"> Submit Rating </button> </div> <!-- CANCEL BUTTON --> <div class="flex w-full mt-3 rounded-md shadow-sm sm:mt-0 sm:w-auto"> <button type="button" class="inline-flex justify-center w-full px-4 py-2 text-base font-medium leading-6 text-gray-600 transition duration-150 ease-in-out bg-white border border-gray-600 rounded-md shadow-sm hover:text-gray-500 sm:text-sm sm:leading-5"> No, Thanks </button> </div> </div> </div>