Interactive Components 구성 요소

<script src="https://cdn.tailwindcss.com"></script>

<style>
  /* Add Material Design inspired button styles */
  .material-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.625rem 1rem;
      font-size: 0.875rem;
      font-weight: 500;
      border-radius: 0.25rem;
      transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  .material-button:hover {
      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  }

  /* Add Material Design card styles */
  .material-card {
      border-radius: 0.5rem;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
      transition: box-shadow 0.15s ease-in-out;
  }

   .material-card:hover {
      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  }

  /* Respond to dark mode */
  @media (prefers-color-scheme: dark) {
    .dark\:bg-gray-800 {
        --tw-bg-opacity: 1;
        background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
    }
    .dark\:text-white {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
    }
     .dark\:bg-blue-700 {
        --tw-bg-opacity: 1;
        background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
    }
     .dark\:hover\:bg-blue-800:hover {
        --tw-bg-opacity: 1;
        background-color: rgba(30, 64, 175, var(--tw-bg-opacity));
     }
      .dark\:bg-gray-700 {
          --tw-bg-opacity: 1;
          background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
      }
       .dark\:border-gray-600 {
          --tw-border-opacity: 1;
          border-color: rgba(75, 85, 99, var(--tw-border-opacity));
       }
  }
</style>

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
  <div class="material-card w-full max-w-sm bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6">
    <div class="flex justify-center mb-6">
      <img class="w-24 h-24 rounded-full border-4 border-blue-500 dark:border-blue-700" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar">
    </div>
    <div class="text-center mb-6">
      <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-300">Software Engineer</p>
    </div>
    <div class="flex justify-around">
      <button class="material-button bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800">
        Follow
      </button>
      <button class="material-button bg-white text-gray-800 border border-gray-300 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600">
        Message
      </button>
    </div>
  </div>
</div>