성공 메시지

Success Messages 구성 요소

미니멀리스트/플랫 디자인, 밝은 파스텔 색상과 복잡한 반응형 레이아웃이 있는 소셜 미디어용 성공 메시지 구성 요소입니다.

                <div class="min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-8 space-y-8 border border-gray-200 dark:border-gray-700">
    <h2 class="text-5xl font-extrabold text-center text-gray-800 dark:text-gray-100 leading-tight">
      <span class="block">Congratulations!</span>
      <span class="block text-purple-500 dark:text-purple-400 mt-2">Your Post is Live!</span>
    </h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Left Section: Post Preview -->
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-100 dark:border-gray-600">
        <h3 class="text-2xl font-bold text-gray-700 dark:text-gray-200 mb-4">Your Latest Creation</h3>
        <div class="relative rounded-lg overflow-hidden mb-4 aspect-video shadow-lg ring-4 ring-purple-300 dark:ring-purple-600">
          <img src="https://picsum.photos/800/450?random=1" alt="Post Image" class="w-full h-full object-cover">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent p-4 flex items-end">
            <p class="text-white text-lg font-semibold">"Exploring new horizons and pushing boundaries."</p>
          </div>
        </div>
        <div class="flex items-center space-x-3 mb-3">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-pink-300 dark:border-pink-500">
          <p class="text-gray-600 dark:text-gray-300 font-medium">@CreativeExplorer</p>
        </div>
        <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
          <span><i class="fas fa-heart text-red-400"></i> 1.2K Likes</span>
          <span><i class="fas fa-comment text-blue-400"></i> 89 Comments</span>
          <span><i class="fas fa-share-alt text-green-400"></i> 20 Shares</span>
        </div>
      </div>
      
      <!-- Right Section: Next Steps & Sharing -->
      <div class="space-y-6">
        <!-- Metrics Card -->
        <div class="bg-purple-50 dark:bg-purple-900 border border-purple-200 dark:border-purple-700 rounded-lg p-6 shadow-md">
          <h3 class="text-2xl font-bold text-purple-700 dark:text-purple-200 mb-4">Performance Snapshot</h3>
          <div class="grid grid-cols-2 gap-4 text-center">
            <div>
              <p class="text-4xl font-extrabold text-purple-600 dark:text-purple-300">+15%</p>
              <p class="text-gray-600 dark:text-gray-300 mt-1">Engagement Rate</p>
            </div>
            <div>
              <p class="text-4xl font-extrabold text-pink-600 dark:text-pink-300">+300</p>
              <p class="text-gray-600 dark:text-gray-300 mt-1">New Followers</p>
            </div>
          </div>
        </div>
        
        <!-- Call to Actions -->
        <div class="bg-pink-50 dark:bg-pink-900 border border-pink-200 dark:border-pink-700 rounded-lg p-6 shadow-md space-y-4">
          <h3 class="text-2xl font-bold text-pink-700 dark:text-pink-200 mb-4">What's Next?</h3>
          <button class="w-full bg-gradient-to-r from-purple-400 to-pink-400 text-white font-bold py-3 px-6 rounded-full text-lg shadow-lg hover:from-purple-500 hover:to-pink-500 transform hover:scale-105 transition duration-300 ease-in-out">
            <i class="fas fa-share-alt mr-2"></i> Share This Post
          </button>
          <button class="w-full bg-white dark:bg-gray-700 text-purple-600 dark:text-purple-300 font-bold py-3 px-6 rounded-full text-lg shadow-lg border border-purple-300 dark:border-purple-600 hover:bg-purple-50 dark:hover:bg-gray-600 transform hover:scale-105 transition duration-300 ease-in-out">
            <i class="fas fa-chart-line mr-2"></i> View Analytics
          </button>
          <button class="w-full text-gray-600 dark:text-gray-300 bg-transparent border border-gray-300 dark:border-gray-600 font-bold py-3 px-6 rounded-full text-lg hover:bg-gray-100 dark:hover:bg-gray-700 transform hover:scale-105 transition duration-300 ease-in-out">
            <i class="fas fa-plus mr-2"></i> Create Another Post
          </button>
        </div>
      </div>
    </div>
    
    <!-- Footer Message -->
    <p class="text-center text-gray-500 dark:text-gray-400 text-md mt-8">

Success Messages 구성 요소

소셜 미디어 애플리케이션을 위한 복잡하고 반응형이며 어두운 테마와 호환되는 성공 메시지 구성 요소로, Tailwind CSS를 사용하여 생생한 3D 디자인을 특징으로 합니다. 여기에는 여러 대화형 요소가 포함됩니다.

미리보기 열기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
  <div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 max-w-md w-full overflow-hidden transform transition-all duration-500 hover:scale-105">
    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-purple-600 to-pink-500 opacity-75 rounded-3xl transform -rotate-3 translate-x-2 translate-y-2 group-hover:rotate-0 group-hover:translate-x-0 group-hover:translate-y-0 transition-all duration-500"></div>
    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-blue-500 to-green-400 opacity-75 rounded-3xl transform rotate-3 -translate-x-2 -translate-y-2 group-hover:rotate-0 group-hover:translate-x-0 group-hover:translate-y-0 transition-all duration-500"></div>
    
    <div class="relative z-10 flex flex-col items-center justify-center text-center">
      <div class="mb-6 flex items-center justify-center space-x-2">
        <div class="relative">
          <img src="https://i.pravatar.cc/150?img=1" alt="Avatar 1" class="w-16 h-16 rounded-full ring-4 ring-purple-400 object-cover shadow-lg">
          <span class="absolute bottom-0 right-0 block h-4 w-4 rounded-full ring-2 ring-white bg-green-500"></span>
        </div>
        <div class="relative">
          <img src="https://i.pravatar.cc/150?img=2" alt="Avatar 2" class="w-16 h-16 rounded-full ring-4 ring-pink-400 object-cover shadow-lg">
          <span class="absolute bottom-0 right-0 block h-4 w-4 rounded-full ring-2 ring-white bg-green-500"></span>
        </div>
        <div class="relative">
          <img src="https://i.pravatar.cc/150?img=3" alt="Avatar 3" class="w-16 h-16 rounded-full ring-4 ring-blue-400 object-cover shadow-lg">
          <span class="absolute bottom-0 right-0 block h-4 w-4 rounded-full ring-2 ring-white bg-green-500"></span>
        </div>
      </div>
      
      <h2 class="text-4xl font-extrabold text-gray-900 dark:text-white mb-4 leading-tight" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">
        Success!
      </h2>
      <p class="text-gray-700 dark:text-gray-300 mb-6 text-lg">
        Your post was successfully shared with your network. Expect lots of engagement!
      </p>
      
      <div class="w-full flex flex-col space-y-4">
        <button class="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition-all duration-300 text-lg">
          View Post
        </button>
        <button class="w-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition-all duration-300 text-lg">
          Share Again
        </button>
      </div>

      <div class="mt-8 text-sm text-gray-500 dark:text-gray-400">
        <p>You've reached <span class="font-semibold text-purple-600">1,234 friends</span> this time!</p>
        <div class="relative pt-1">
          <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-fuchsia-200 dark:bg-fuchsia-800">
            <div style="width: 80%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-fuchsia-500 dark:bg-fuchsia-400"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Success Messages 구성 요소

파스텔 색조의 구성표, 미묘한 애니메이션, 어두운 테마를 지원하는 반응형 디자인이 포함된 간단한 성공 메시지 구성 요소입니다. 포트폴리오가 사용자 작업을 인식하도록 설계되었습니다.

미리보기 열기

                <div class="min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-indigo-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-8 flex items-center justify-center">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 md:p-8 max-w-sm w-full transform transition-all duration-300 hover:scale-105 ease-in-out">
    <div class="flex flex-col items-center justify-center space-y-4">
      <div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-green-100 dark:bg-green-700 transform transition-transform duration-500 ease-in-out scale-0 animate-scaleIn">
        <svg class="w-10 h-10 text-green-500 dark:text-green-200" 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="M5 13l4 4L19 7"></path>
        </svg>
      </div>
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center">Success!</h2>
      <p class="text-gray-600 dark:text-gray-300 text-center text-sm">
        Your action was completed successfully. We appreciate your patience.
      </p>
      <button class="px-6 py-2 rounded-full bg-purple-200 dark:bg-purple-600 text-purple-800 dark:text-white font-semibold hover:bg-purple-300 dark:hover:bg-purple-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-75">
        Continue
      </button>
    </div>
  </div>
</div>

<style>
  @keyframes scaleIn {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    60% {
      transform: scale(1.1);
      opacity: 1;
    }
    100% {
      transform: scale(1);
    }
  }

  .animate-scaleIn {
    animation: scaleIn 0.6s ease-out forwards;
  }
</style>

성공 메시지 구성 요소 - Material Design Complementary

블로그/콘텐츠 사이트에 대한 머티리얼 디자인 스타일의 성공 메시지 구성 요소로, 보색 구성표를 사용합니다. 어두운 테마 지원으로 반응형입니다. 자바스크립트가 없습니다.

미리보기 열기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="max-w-sm w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
    <div class="flex items-center mb-4">
      <div class="flex-shrink-0">
        <svg class="h-8 w-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
      </div>
      <div class="ml-3">
        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Success!</h3>
      </div>
    </div>
    <div class="mt-2">
      <p class="text-sm text-gray-500 dark:text-gray-300">
        Your action was completed successfully.
      </p>
    </div>
    <div class="mt-4">
      <button type="button" class="inline-flex justify-center px-4 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900 border border-transparent rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900">
        Close
      </button>
    </div>
  </div>
</div>

Success Messages 구성 요소

반응형 성공 메시지 구성 요소에는 다크 모드 지원 및 전자 상거래를 위한 Glassmorphism 스타일이 있습니다.

미리보기 열기

                <div class="flex items-center justify-center min-h-screen p-5 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md mx-auto bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 rounded-xl p-6 shadow-xl backdrop-filter backdrop-blur-lg">
    <div class="text-center">
      <svg class="w-16 h-16 mx-auto text-green-500" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <h2 class="mt-5 text-2xl font-semibold text-gray-800 dark:text-white">Payment Successful!</h2>
      <p class="mt-2 text-gray-600 dark:text-gray-300">Thank you for your purchase. Your order has been placed successfully.</p>
    </div>
    <div class="mt-6 border-t border-gray-200 dark:border-gray-700 pt-4">
      <div class="flex justify-between text-gray-700 dark:text-gray-200">
        <span>Transaction ID:</span>
        <span>#123456789</span>
      </div>
      <div class="flex justify-between mt-2 text-gray-700 dark:text-gray-200">
        <span>Amount Paid:</span>
        <span>$199.00</span>
      </div>
    </div>
    <div class="mt-6">
      <a href="#" class="block w-full px-4 py-2 text-center text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">View Order Details</a>
    </div>
  </div>
</div>

Success Messages 구성 요소

블로그/콘텐츠 읽기를 위해 다크 모드로 설계된 성공 메시지 구성 요소입니다. 그것은 유사한 색 구성표를 특징으로 하며 반응형입니다.

미리보기 열기

                <div class="bg-gray-900 text-gray-200 p-6 rounded-lg max-w-lg mx-auto shadow-lg">
    <h2 class="text-xl font-semibold mb-4">Success!</h2>
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
            <p class="font-medium">John Doe</p>
            <p class="text-sm text-gray-400">a moment ago</p>
        </div>
    </div>
    <p class="mb-4">Your changes have been saved successfully!</p>
    <img src="https://picsum.photos/seed/success/400/200" alt="Success Image" class="rounded-lg mb-4" />
    <button class="bg-green-600 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400">
        View Details
    </button>
</div>

<div class="bg-gray-800 text-gray-200 p-6 rounded-lg max-w-lg mx-auto shadow-lg mt-4">
    <h2 class="text-xl font-semibold mb-4">Success!</h2>
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
            <p class="font-medium">Jane Smith</p>
            <p class="text-sm text-gray-400">a few moments ago</p>
        </div>
    </div>
    <p class="mb-4">Your email has been verified successfully!</p>
    <img src="https://picsum.photos/seed/email_verified/400/200" alt="Email Verification Image" class="rounded-lg mb-4" />
    <button class="bg-green-600 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400">
        Check Inbox
    </button>
</div>

<div class="bg-gray-700 text-gray-200 p-6 rounded-lg max-w-lg mx-auto shadow-lg mt-4">
    <h2 class="text-xl font-semibold mb-4">Success!</h2>
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
            <p class="font-medium">Michael Brown</p>
            <p class="text-sm text-gray-400">just now</p>
        </div>
    </div>
    <p class="mb-4">Your profile picture has been updated!</p>
    <img src="https://picsum.photos/seed/profile_update/400/200" alt="Profile Update Image" class="rounded-lg mb-4" />
    <button class="bg-green-600 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400">
        View Profile
    </button>
</div>

스큐어모피즘SuccessMessage

대시보드에 대한 스큐어모피즘 성공 메시지, 보색 및 다크 모드가 있는 복합

미리보기 열기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="bg-white dark:bg-gray-800 p-10 rounded-lg shadow-2xl w-full max-w-md border border-gray-200 dark:border-gray-700 relative overflow-hidden">
    <!-- Skeuomorphic header - subtle gradient and border -->
    <div class="absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-green-400 to-green-500 dark:from-green-600 dark:to-green-700 rounded-t-lg border-b border-green-600 dark:border-green-800"></div>
    
    <!-- Content Area with subtle inner shadow -->
    <div class="relative z-10 pt-4">
      <div class="text-center mb-8">
        <!-- Skeuomorphic Icon - Embossed look -->
        <div class="mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-inner mb-4">
          <svg class="w-10 h-10 text-green-500 dark:text-green-300" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        </div>
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Success!</h2>
        <p class="text-gray-600 dark:text-gray-400">Your operation was completed successfully.</p>
      </div>

      <!-- Detail Section - Elevated and Grouped -->
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg mb-6 shadow-md border border-gray-100 dark:border-gray-600">
        <div class="flex justify-between items-center mb-4">
          <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Transaction ID:</span>
          <span class="text-sm text-gray-600 dark:text-gray-400">#XYZ123456789</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Status:</span>
          <span class="text-sm text-green-600 dark:text-green-400 font-semibold">Completed</span>
        </div>
      </div>

      <!-- Action Buttons - Bevel effect -->
      <div class="flex flex-col space-y-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transform transition duration-300 ease-in-out border-b-4 border-blue-700 dark:border-blue-800 hover:translate-y-1 hover:shadow-xl">
          View Details
        </button>
        <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-3 px-6 rounded-lg shadow-lg transform transition duration-300 ease-in-out border-b-4 border-gray-500 dark:border-gray-600 hover:translate-y-1 hover:shadow-xl dark:bg-gray-600 dark:text-gray-200">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

Success Messages 구성 요소

반응형 Success Messages 구성 요소는 생생한 색 구성표와 함께 다크 모드를 위해 설계되었으며, 포트폴리오에서 작업을 보여주는 데 이상적입니다.

미리보기 열기

                <div class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-lg mx-auto">  
    <h2 class="text-xl text-vibrant-500 font-bold mb-4">Success Messages</h2>  
    <div class="bg-gray-900 p-4 rounded-lg mb-4">  
        <div class="flex items-center mb-2">  
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">  
            <span class="text-white font-semibold">John Doe</span>  
            <span class="text-gray-400 text-sm ml-2">2 minutes ago</span>  
        </div>  
        <p class="text-gray-300">Your project has been successfully submitted!</p>  
    </div>  
    <div class="bg-gray-900 p-4 rounded-lg mb-4">  
        <div class="flex items-center mb-2">  
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">  
            <span class="text-white font-semibold">Jane Smith</span>  
            <span class="text-gray-400 text-sm ml-2">5 minutes ago</span>  
        </div>  
        <p class="text-gray-300">Your profile has been updated successfully!</p>  
    </div>  
    <div class="bg-gray-900 p-4 rounded-lg mb-4">  
        <div class="flex items-center mb-2">  
            <img src="https://randomuser.me/api/portraits/men/80.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">  
            <span class="text-white font-semibold">Mike Johnson</span>  
            <span class="text-gray-400 text-sm ml-2">10 minutes ago</span>  
        </div>  
        <p class="text-gray-300">Your order has been placed successfully!</p>  
    </div>  
    <div class="flex justify-center mt-4">  
        <img src="https://picsum.photos/300/200?random=1" alt="Success Image" class="rounded-lg shadow-lg">  
    </div>  
</div>

Success Messages 구성 요소

성공 메시지를 미니멀리스트 스타일로 표시하는 반응형 구성 요소로, 어두운 테마를 지원하는 작업이나 제품을 보여주는 데 적합합니다.

미리보기 열기

                <div class="max-w-md mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg mt-10">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/40" alt="Success Avatar" class="w-10 h-10 rounded-full mr-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Success!</h2>
    </div>
    <p class="text-gray-600 dark:text-gray-300 mb-4">Your changes have been saved successfully. You can view them in your portfolio.</p>
    <div class="flex space-x-2">
        <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">View Portfolio</a>
        <a href="#" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-500">Dismiss</a>
    </div>
</div>

<div class="max-w-md mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg mt-10">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/40" alt="Success Avatar" class="w-10 h-10 rounded-full mr-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Success!</h2>
    </div>
    <p class="text-gray-600 dark:text-gray-300 mb-4">You have successfully submitted your form. Thank you for your submission!</p>
    <div class="flex space-x-2">
        <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">View Confirmation</a>
        <a href="#" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-500">Dismiss</a>
    </div>
</div>

Success Messages 구성 요소

어스 톤과 어두운 테마를 지원하는 Material Design에서 영감을 받은 반응형 성공 메시지 구성요소로, 콘텐츠 소비를 위해 설계되었습니다.

미리보기 열기

                <div class="max-w-xl mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50" alt="Success Icon" class="w-10 h-10 rounded-full mr-2">
        <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</div>
    </div>
    <p class="text-gray-600 dark:text-gray-400">
        Your changes have been saved successfully. You can now continue to explore the content.
    </p>
    <div class="mt-4">
        <button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600">Continue</button>
    </div>
</div>

<div class="max-w-xl mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg mt-4">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
        <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</div>
    </div>
    <p class="text-gray-600 dark:text-gray-400">
        Thanks for your submission! Stay tuned for updates regarding your content.
    </p>
    <div class="mt-4">
        <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">Learn More</button>
    </div>
</div>

카테고리