Mobile Chat Popup - Copy this React, Tailwind Component to your project

<td className="px-6 py-4"> <button onClick={() => handleButtonClick(user)} className="p-2 text-gray-500 rounded-lg hover:bg-gray-50 transition-colors"> <span className="sr-only">Open chat</span> <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/> </svg> </button> {showMessages && ( <div className="absolute right-0 mt-2 w-80 bg-white border border-gray-200 rounded-lg shadow-lg z-50"> <div className="p-4"> <h3 className="text-lg font-semibold text-gray-900">Notifications</h3> <div className="mt-4 text-sm text-gray-500"> No new notifications </div> </div> </div> )} </td>