CCHub Logo CCHub Tailwind Collection
コンポーネント 成功メッセージ SuccessMessagesコンポーネント

SuccessMessagesコンポーネント

eコマース向けのシンプルな成功メッセージコンポーネントで、モノクロのマテリアルデザインの美学、レスポンシブレイアウト、ダークテーマのサポートを備えています。

プレビュー

HTMLコード 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-sm mx-auto">
    <div class="text-center">
      <div class="mb-4 text-green-500 mx-auto">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Order Confirmed!</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Your order #12345 has been successfully placed.</p>
      <button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out">
        Continue Shopping
      </button>
    </div>
  </div>
</div>

関連コンポーネント

Skeuomorphic_Retro_Success_Message_Component

スキューモーフィックでレトロ/ビンテージなスタイルでデザインされた適度な複雑さの成功メッセージコンポーネントで、ファッション/美容ブランドに適しています。レスポンシブデザインとダークモードのサポートが含まれています。

開ける

成功メッセージコンポーネント

レスポンシブエフェクトとダークテーマのサポートを特徴とする3Dデザインスタイルの成功メッセージコンポーネントで、画像とアバターのプレースホルダーがあります。

開ける

メンフィスパステルサクセスメッセージ

パステルカラーを使用したメンフィスデザインの美学を備えた、シンプルで応答性の高い成功メッセージコンポーネント。遊び心のある幾何学的な形が特徴で、ダークモードをサポートします。

開ける