Functional Components 구성 요소

<div class="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900 p-4 transition-colors duration-300">
  <div class="w-full max-w-sm rounded-xl overflow-hidden shadow-lg p-6 bg-white dark:bg-gray-800 transform transition-all duration-300 ease-in-out hover:scale-105">
    <div class="relative pb-2/3 rounded-lg overflow-hidden mb-4">
      <img class="absolute h-full w-full object-cover" src="https://picsum.photos/400/300?random=1" alt="Profile image">
      <div class="absolute inset-0 bg-gradient-to-br from-red-500 via-yellow-500 to-green-500 opacity-25"></div>
    </div>
    <div class="text-center">
      <div class="relative inline-block mb-4 -mt-16">
        <img class="w-24 h-24 rounded-full border-4 border-white dark:border-gray-800 object-cover transform transition-all duration-300 ease-in-out hover:scale-110" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
        <span class="absolute bottom-1 right-1 block h-4 w-4 rounded-full ring-2 ring-white dark:ring-gray-800 bg-green-400"></span>
      </div>
      <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-1 leading-tight">
        Jane Doe
      </h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
        28, New York
      </p>
      <div class="flex justify-center space-x-2 text-sm mb-4">
        <span class="px-3 py-1 rounded-full text-white dark:text-gray-900 bg-gradient-to-r from-purple-500 to-indigo-500">Travel</span>
        <span class="px-3 py-1 rounded-full text-white dark:text-gray-900 bg-gradient-to-r from-indigo-500 to-blue-500">Art</span>
        <span class="px-3 py-1 rounded-full text-white dark:text-gray-900 bg-gradient-to-r from-blue-500 to-teal-500">Music</span>
      </div>
      <button class="w-full py-3 rounded-lg text-white font-semibold bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 hover:from-pink-600 hover:via-red-600 hover:to-yellow-600 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800 transition-all duration-300 ease-in-out">
        Connect
      </button>
    </div>
  </div>
</div>