検索コンポーネント

カテゴリ

告知

ユーザーに情報を警告する小さなウィジェット

通知コンポーネント

ダッシュボード用に設計されたレトロ/ビンテージスタイルの通知コンポーネントで、複数のインタラクティブ要素とダークテーマのサポートを備えています。

                <div class="bg-purple-800 dark:bg-gray-900 p-5 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-white text-2xl font-bold mb-3">Notifications</h2>
    <div class="space-y-4">
        <div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-white font-semibold">John Doe</p>
                <p class="text-gray-300">You have a new message. Check it out!</p>
                <span class="text-sm text-gray-500">2 minutes ago</span>
            </div>
        </div>
        <div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-white font-semibold">Jane Smith</p>
                <p class="text-gray-300">Your report has been approved.</p>
                <span class="text-sm text-gray-500">15 minutes ago</span>
            </div>
        </div>
        <div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-white font-semibold">Chris Johnson</p>
                <p class="text-gray-300">New comment on your post.</p>
                <span class="text-sm text-gray-500">30 minutes ago</span>
            </div>
        </div>
        <div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-white font-semibold">Anna Taylor</p>
                <p class="text-gray-300">Don't forget to review your tasks.</p>
                <span class="text-sm text-gray-500">1 hour ago</span>
            </div>
        </div>
    </div>
    <a href="#" class="block text-center text-white bg-blue-600 hover:bg-blue-700 rounded-lg mt-5 p-2 transition duration-300">View All Notifications</a>
</div>

SkeuomorphicNotificationsComponent

Skeuomorphismに触発されたシンプルでレスポンシブな通知コンポーネントで、ビジネス/企業のWebサイトに適した類似の配色が特徴です。ダークテーマのサポートが含まれており、スタイリングにTailwind CSSを使用します。画像はpicsum.photosから、アバターは randomuser.me から提供されています。

開けるプレビュー

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl">
  <div class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full ring-2 ring-blue-300" src="https://randomuser.me/api/portraits/men/85.jpg" alt="User Avatar">
    <div>
      <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Notification</div>
      <p class="text-sm text-gray-600 dark:text-gray-400">You have a new message from John Doe.</p>
    </div>
  </div>
  <div class="mt-4 flex justify-end">
    <button class="px-4 py-2 bg-blue-500 text-white rounded-full shadow hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800">
      View
    </button>
  </div>
</div>

通知コンポーネント

スキューモーフィック要素を使用して設計されたレスポンシブ通知コンポーネントで、ポートフォリオに適した補色の配色とシンプルなレイアウトを使用しています。

開けるプレビュー

                <div class="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Notifications</h2>
    <div class="bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow">
        <div class="flex items-start p-4 border-b border-gray-200 dark:border-gray-700">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Uploaded a new project.</p>
            </div>
        </div>
        <div class="p-4 border-b border-gray-200 dark:border-gray-700">
            <img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="rounded-md">
        </div>
        <div class="flex items-center justify-between p-4">
            <span class="text-gray-500 dark:text-gray-400 text-sm">5 minutes ago</span>
            <button class="bg-blue-500 dark:bg-blue-700 text-white px-4 py-2 rounded-lg">View</button>
        </div>
    </div>
    <div class="mt-4 bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow">
        <div class="flex items-start p-4 border-b border-gray-200 dark:border-gray-700">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Commented on your photo.</p>
            </div>
        </div>
        <div class="p-4 border-b border-gray-200 dark:border-gray-700">
            <img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="rounded-md">
        </div>
        <div class="flex items-center justify-between p-4">
            <span class="text-gray-500 dark:text-gray-400 text-sm">10 minutes ago</span>
            <button class="bg-green-500 dark:bg-green-700 text-white px-4 py-2 rounded-lg">Reply</button>
        </div>
    </div>
</div>

通知コンポーネント

ダークモードをサポートする複雑で応答性の高い通知コンポーネントで、マテリアルデザインの原則とブログ/コンテンツWebサイト用のパステルカラースキームで設計されています。

開けるプレビュー

                <div class="container mx-auto p-4 md:p-8 dark:bg-gray-900">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Notifications</h2>

  <!-- Notification 1 -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-4 overflow-hidden">
    <div class="flex items-center px-4 py-3 border-b border-gray-200 dark:border-gray-700">
      <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div class="flex-1">
        <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Commented on your post</p>
      </div>
      <span class="text-gray-500 dark:text-gray-400 text-sm">2 hours ago</span>
    </div>
    <div class="p-4 text-gray-700 dark:text-gray-300">
      <p>"This is a great article, thanks for sharing!"</p>
    </div>
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-right">
      <button class="text-sm text-blue-600 dark:text-blue-400 hover:underline mr-4">Reply</button>
      <button class="text-sm text-red-600 dark:text-red-400 hover:underline">Dismiss</button>
    </div>
  </div>

  <!-- Notification 2 -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-4 overflow-hidden">
    <div class="flex items-center px-4 py-3 border-b border-gray-200 dark:border-gray-700">
      <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <div class="flex-1">
        <p class="text-gray-800 dark:text-white font-semibold">Jane Smith</p>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post</p>
      </div>
      <span class="text-gray-500 dark:text-gray-400 text-sm">5 hours ago</span>
    </div>
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-right">
      <button class="text-sm text-red-600 dark:text-red-400 hover:underline">Dismiss</button>
    </div>
  </div>

  <!-- Notification 3 -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="flex items-center px-4 py-3 border-b border-gray-200 dark:border-gray-700">
       <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://picsum.photos/id/237/200/300" alt="Post Image">
      <div class="flex-1">
        <p class="text-gray-800 dark:text-white font-semibold">New Post Alert</p>
        <p class="text-gray-600 dark:text-gray-400 text-sm">A new article you might be interested in</p>
      </div>
      <span class="text-gray-500 dark:text-gray-400 text-sm">1 day ago</span>
    </div>
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-right">
      <button class="text-sm text-blue-600 dark:text-blue-400 hover:underline mr-4">View Post</button>
      <button class="text-sm text-red-600 dark:text-red-400 hover:underline">Dismiss</button>
    </div>
  </div>

</div>

通知コンポーネント

マイクロインタラクション、トライアドカラースキーム、ダークテーマのサポートを備えたレスポンシブ通知コンポーネントで、作業や製品を紹介するために設計されています。

開けるプレビュー

                <div class="max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Notifications</h2>
    <div class="space-y-4">
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-md p-4 transform transition-transform duration-300 hover:scale-105">
            <div class="flex items-start">
                <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">John Doe</h3>
                    <p class="text-sm text-gray-700 dark:text-gray-400">Liked your project "Sunset Scenery"</p>
                    <span class="text-xs text-gray-500 dark:text-gray-400">2 minutes ago</span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-md p-4 transform transition-transform duration-300 hover:scale-105">
            <div class="flex items-start">
                <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Jane Smith</h3>
                    <p class="text-sm text-gray-700 dark:text-gray-400">Commented on your work "Abstract Art"</p>
                    <span class="text-xs text-gray-500 dark:text-gray-400">10 minutes ago</span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-md p-4 transform transition-transform duration-300 hover:scale-105">
            <div class="flex items-start">
                <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Alex Johnson</h3>
                    <p class="text-sm text-gray-700 dark:text-gray-400">Followed you</p>
                    <span class="text-xs text-gray-500 dark:text-gray-400">30 minutes ago</span>
                </div>
            </div>
        </div>
    </div>
</div>

通知コンポーネント

ポートフォリオの作業を表示するためのアースカラーと複雑なインタラクションで設計されたレトロ/ビンテージ通知コンポーネント。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-center text-2xl font-bold text-brown-700 dark:text-brown-300 mb-4">Notifications</h2>
    <div class="space-y-4">
        <div class="bg-green-100 dark:bg-green-900 border-l-4 border-green-600 p-3 rounded-md">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-brown-800 dark:text-brown-200">John Doe</p>
                    <p class="text-brown-600 dark:text-brown-400">You have a new message!</p>
                    <p class="text-gray-500 dark:text-gray-400 text-sm">2 minutes ago</p>
                </div>
            </div>
        </div>
        <div class="bg-yellow-100 dark:bg-yellow-900 border-l-4 border-yellow-600 p-3 rounded-md">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-brown-800 dark:text-brown-200">Jane Smith</p>
                    <p class="text-brown-600 dark:text-brown-400">Your portfolio has been viewed!</p>
                    <p class="text-gray-500 dark:text-gray-400 text-sm">10 minutes ago</p>
                </div>
            </div>
        </div>
        <div class="bg-red-100 dark:bg-red-900 border-l-4 border-red-600 p-3 rounded-md">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/85.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-brown-800 dark:text-brown-200">Alice Brown</p>
                    <p class="text-brown-600 dark:text-brown-400">Your project deadline is approaching!</p>
                    <p class="text-gray-500 dark:text-gray-400 text-sm">30 minutes ago</p>
                </div>
            </div>
        </div>
    </div>
    <button class="mt-4 w-full bg-brown-600 dark:bg-brown-700 text-white py-2 rounded-lg hover:bg-brown-500 dark:hover:bg-brown-600">View All Notifications</button>
</div>

通知コンポーネント

ソーシャルメディアインターフェースのダークモードサポートを備えたレスポンシブ通知コンポーネントで、鮮やかな配色。

開けるプレビュー

                <div class="p-4 bg-gray-900 dark:bg-black text-white rounded-lg shadow-md">
  <h2 class="text-xl font-bold mb-4 text-teal-400">Notifications</h2>
  <div class="space-y-4">
    <div class="flex items-center border-b border-gray-700 pb-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="flex-grow"><span class="font-semibold text-purple-400">John Doe</span> liked your post.</p>
      <span class="text-gray-500 text-sm">2 min ago</span>
    </div>
    <div class="flex items-center border-b border-gray-700 pb-4">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="flex-grow"><span class="font-semibold text-pink-400">Jane Smith</span> commented on your photo.</p>
      <span class="text-gray-500 text-sm">1 hour ago</span>
    </div>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="flex-grow"><span class="font-semibold text-yellow-400">Peter Jones</span> started following you.</p>
      <span class="text-gray-500 text-sm">3 hours ago</span>
    </div>
  </div>
</div>

通知コンポーネント

レトロ/ビンテージの美学とeコマース用の鮮やかな色で設計された複雑な通知コンポーネントで、ダークモードをサポートします。

開けるプレビュー

                <div class="relative z-10">
  <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-5 max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-4">Notifications</h2>
    <div class="space-y-4">
      <div class="flex items-center bg-yellow-200 dark:bg-yellow-800 p-4 rounded-lg shadow">
        <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-yellow-600 dark:border-yellow-400" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-black dark:text-white">New Order Placed!</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300">Order #12345 has been successfully placed.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400">Just now</span>
        </div>
      </div>
      <div class="flex items-center bg-green-200 dark:bg-green-800 p-4 rounded-lg shadow">
        <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-green-600 dark:border-green-400" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-black dark:text-white">Item Shipped!</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300">Your order #12345 is on its way!</p>
          <span class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
        </div>
      </div>
      <div class="flex items-center bg-red-200 dark:bg-red-800 p-4 rounded-lg shadow">
        <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-red-600 dark:border-red-400" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-black dark:text-white">Payment Failed!</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300">There was an issue with your payment for order #12345.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</span>
        </div>
      </div>
      <div class="flex items-center bg-purple-200 dark:bg-purple-800 p-4 rounded-lg shadow">
        <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-purple-600 dark:border-purple-400" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-black dark:text-white">Review Reminder!</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300">Don’t forget to review your recent purchase.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400">1 day ago</span>
        </div>
      </div>
    </div>
  </div>
</div>

Minimalist Notifications コンポーネント (グレースケール)

ポートフォリオ用のグレースケールのシンプルでミニマリストな通知コンポーネントで、Tailwind CSSを使用したレスポンシブモードとダークモードのサポートがあります。画像にはpicsum.photosを使用し、アバターには randomuser.me を使用します。

開けるプレビュー

                <div class="container mx-auto p-4">

  <!-- Light mode (default) -->
  <div class="bg-white shadow-md rounded-lg p-4 mb-4 hidden dark:block">
    <div class="flex items-start">
      <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
      <div class="flex-grow">
        <p class="text-gray-800 font-semibold">New Message</p>
        <p class="text-gray-600 text-sm">You have a new message from John Doe.</p>
      </div>
      <button class="text-gray-500 hover:text-gray-700 focus:outline-none">
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Dark mode -->
  <div class="bg-gray-800 shadow-md rounded-lg p-4 mb-4 dark:hidden">
    <div class="flex items-start">
      <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
      <div class="flex-grow">
        <p class="text-gray-200 font-semibold">New Message</p>
        <p class="text-gray-400 text-sm">You have a new message from John Doe.</p>
      </div>
      <button class="text-gray-500 hover:text-gray-300 focus:outline-none">
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
  </div>

</div>

通知コンポーネント

パステルカラーの配色、適度な複雑さ、ダークテーマをサポートするレスポンシブデザインを備えたニューモーフィズムスタイルの通知コンポーネント。ビジネス/企業のWebサイトに適しています。

開けるプレビュー

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg">
  <h2 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Notifications</h2>
  
  <!-- Notification Item 1 -->
  <div class="flex items-center p-3 mb-3 bg-gray-200 dark:bg-gray-700 rounded-md shadow-neumorphism-inner-light dark:shadow-neumorphism-inner-dark">
    <img class="w-10 h-10 rounded-full mr-3 shadow-neumorphism-light dark:shadow-neumorphism-dark" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
    <div class="flex-grow">
      <p class="text-sm font-medium text-gray-800 dark:text-gray-100">John Doe commented on your post.</p>
      <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
    </div>
    <button class="ml-2 text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 focus:outline-none">
      <svg class="w-4 h-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="M6 18L18 6M6 6l12 12"></path></svg>
    </button>
  </div>

  <!-- Notification Item 2 -->
  <div class="flex items-center p-3 mb-3 bg-gray-200 dark:bg-gray-700 rounded-md shadow-neumorphism-inner-light dark:shadow-neumorphism-inner-dark">
    <img class="w-10 h-10 rounded-full mr-3 shadow-neumorphism-light dark:shadow-neumorphism-dark" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    <div class="flex-grow">
      <p class="text-sm font-medium text-gray-800 dark:text-gray-100">Your subscription is about to expire.</p>
      <p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
    </div>
     <button class="ml-2 text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 focus:outline-none">
      <svg class="w-4 h-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="M6 18L18 6M6 6l12 12"></path></svg>
    </button>
  </div>
  
  <!-- Add more notification items as needed -->

</div>

<style>
  /* Custom Neumorphism shadows - adjust values as needed */
  .shadow-neumorphism-light {
      box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphism-light {
       box-shadow: 7px 7px 15px #333333, -7px -7px 15px #555555;
  }
   .shadow-neumorphism-dark {
      box-shadow: 7px 7px 15px #333333, -7px -7px 15px #555555;
  }
  .dark .shadow-neumorphism-dark {
      box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .shadow-neumorphism-inner-light {
      box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
   .dark .shadow-neumorphism-inner-light {
      box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
  }
  .shadow-neumorphism-inner-dark {
      box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
  }
   .dark .shadow-neumorphism-inner-dark {
      box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
</style>