Success Messages 구성 요소

<div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans antialiased">

  <!-- Component Wrapper -->
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">

    <!-- Header Section -->
    <div class="bg-green-600 dark:bg-green-700 p-4 sm:p-6 flex items-center justify-between shadow-md">
      <h2 class="text-xl sm:text-2xl font-bold text-white flex items-center">
        <svg class="h-7 w-7 sm:h-8 sm:w-8 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
        </svg>
        <span class="hidden sm:inline-block">Success! Your Actions are Noted</span>
        <span class="sm:hidden">Success!</span>
      </h2>
      <button aria-label="Close success message" class="text-white hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-600 focus:ring-white rounded-full p-1">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Main Content Area -->
    <div class="p-4 sm:p-6 text-gray-700 dark:text-gray-300">

      <p class="mb-6 text-lg sm:text-xl font-semibold">
        Great job! Here's a quick summary of your recent successful operations.
      </p>

      <!-- Message Categories/Cards -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        <!-- Card 1: New Post Published -->
        <div class="bg-green-50 dark:bg-gray-700 rounded-lg p-5 shadow-lg transform transition duration-300 hover:scale-[1.02] hover:shadow-xl">
          <div class="flex items-center mb-4">
            <img class="h-12 w-12 rounded-full mr-4 object-cover border-2 border-green-400 dark:border-green-500" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
            <div>
              <p class="font-bold text-gray-900 dark:text-white">Post Published!</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Just now</p>
            </div>
          </div>
          <p class="text-gray-800 dark:text-gray-200 mb-4 line-clamp-3">
            Your new article "Exploring the Cosmos: A Journey Through Galaxies" has been successfully published to your profile and is now visible to all your followers.
          </p>
          <div class="flex justify-between items-center">
            <a href="#" class="text-sm font-medium text-green-700 dark:text-green-400 hover:underline flex items-center">
              View Post
              <svg class="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </a>
            <span class="text-xs text-gray-500 dark:text-gray-400">Reads: 1,234</span>
          </div>
        </div>

        <!-- Card 2: Friend Request Accepted -->
        <div class="bg-green-50 dark:bg-gray-700 rounded-lg p-5 shadow-lg transform transition duration-300 hover:scale-[1.02] hover:shadow-xl">
          <div class="flex items-center mb-4">
            <img class="h-12 w-12 rounded-full mr-4 object-cover border-2 border-green-400 dark:border-green-500" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
            <div>
              <p class="font-bold text-gray-900 dark:text-white">Friend Request Accepted!</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">5 minutes ago</p>
            </div>
          </div>
          <p class="text-gray-800 dark:text-gray-200 mb-4 line-clamp-3">
            John Doe has accepted your friend request. You can now send messages and see his full activity feed.
          </p>
          <div class="flex justify-between items-center">
            <a href="#" class="text-sm font-medium text-green-700 dark:text-green-400 hover:underline flex items-center">
              View Profile
              <svg class="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </a>
            <span class="text-xs text-gray-500 dark:text-gray-400">Shared: 12 posts</span>
          </div>
        </div>

        <!-- Card 3: Profile Update Saved -->
        <div class="bg-green-50 dark:bg-gray-700 rounded-lg p-5 shadow-lg transform transition duration-300 hover:scale-[1.02] hover:shadow-xl">
          <div class="flex items-center mb-4">
            <svg class="h-12 w-12 text-green-500 mr-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
            </svg>
            <div>
              <p class="font-bold text-gray-900 dark:text-white">Profile Updated!</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">1 hour ago</p>
            </div>
          </div>
          <p class="text-gray-800 dark:text-gray-200 mb-4 line-clamp-3">
            Your profile picture and bio have been successfully updated. Your new look is now live!
          </p>
          <div class="flex justify-between items-center">
            <a href="#" class="text-sm font-medium text-green-700 dark:text-green-400 hover:underline flex items-center">
              Edit Profile
              <svg class="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
              </svg>
            </a>
            <span class="text-xs text-gray-500 dark:text-gray-400">Last Updated: 16:30</span>
          </div>
        </div>

        <!-- Card 4: Event Created -->
        <div class="bg-green-50 dark:bg-gray-700 rounded-lg p-5 shadow-lg transform transition duration-300 hover:scale-[1.02] hover:shadow-xl">
          <div class="flex items-center mb-4">
            <svg class="h-12 w-12 text-green-500 mr-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
            </svg>
            <div>
              <p class="font-bold text-gray-900 dark:text-white">Event Created!</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">3 hours ago</p>
            </div>
          </div>
          <p class="text-gray-800 dark:text-gray-200 mb-4 line-clamp-3">
            Your new event "Weekend Hiking Adventure" has been successfully created and shared with your connections.
          </p>
          <div class="flex justify-between items-center">
            <a href="#" class="text-sm font-medium text-green-700 dark:text-green-400 hover:underline flex items-center">
              Manage Event
              <svg class="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
              </svg>
            </a>
            <span class="text-xs text-gray-500 dark:text-gray-400">Attendees: 5/20</span>
          </div>
        </div>

      </div>

      <!-- Call to Action / Footer Section -->
      <div class="mt-8 flex flex-col sm:flex-row items-center justify-between border-t border-gray-200 dark:border-gray-700 pt-6">
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 sm:mb-0 text-center sm:text-left">Need more insights? Check your activity log.</p>
        <button class="px-6 py-3 bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700 text-white font-semibold rounded-full shadow-lg transition duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-green-600">
          Go to Activity Log
        </button>
      </div>

    </div>

  </div>

</div>