検索コンポーネント

カテゴリ

資本

コンテンツを表示するポップアップウィンドウ

スキューモーフィックソーシャルメディアモーダル

ソーシャルメディアインタラクション用に設計された、適度に複雑で応答性に優れたスキューモーフィックモーダルコンポーネントで、補色スキームとダークモードのサポートを特長としています。

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-50 dark:bg-black dark:bg-opacity-75">
  <div class="relative w-full max-w-lg mx-auto bg-gradient-to-br from-gray-200 to-gray-300 rounded-2xl shadow-2xl overflow-hidden dark:from-neutral-700 dark:to-neutral-900 border border-gray-400 dark:border-neutral-600
              transform perspective-1000 rotateX-3 translateZ-0 transition-all duration-300 ease-in-out
              hover:scale-105 hover:rotateX-0 hover:translateZ-10 md:hover:scale-105 group">

    <!-- Top Bezel / Highlight -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-gray-300 rounded-t-2xl opacity-75 dark:bg-neutral-600 dark:opacity-50 group-hover:h-6 transition-all duration-300"></div>

    <!-- Content Area -->
    <div class="p-6 relative z-10">

      <!-- Header Bar - Mimicking a metallic or glassy top bar -->
      <div class="flex items-center justify-between pb-4 border-b border-gray-400 dark:border-neutral-600 mb-4
                  bg-gray-100/70 dark:bg-neutral-800/70 rounded-md p-3 -mx-3 -mt-3 shadow-inner-sm shadow-gray-400/50 dark:shadow-neutral-900/50">
        <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">New Post</h3>
        <button class="p-2 rounded-full bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400
                       shadow-md border border-red-400 dark:bg-red-700 dark:hover:bg-red-800 dark:border-red-600
                       text-white text-lg font-bold aspect-square w-8 h-8 flex items-center justify-center
                       transform transition-all duration-200 ease-out active:scale-95 active:shadow-inner-md active:bg-red-700 dark:active:bg-red-900">
          ✕
        </button>
      </div>

      <!-- User Profile Section -->
      <div class="flex items-center space-x-4 mb-6 relative p-3 rounded-xl bg-gray-100/50 dark:bg-neutral-800/50 shadow-inner shadow-gray-300/50 dark:shadow-neutral-900/50">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-16 h-16 rounded-full object-cover border-4 border-orange-400 dark:border-orange-600 shadow-md transform rotate-1 transition-transform duration-300 hover:rotate-6">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100 text-lg">Jessica Miller</p>
          <p class="text-sm text-gray-600 dark:text-gray-300 flex items-center">
            <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400 drop-shadow-sm" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
            </svg>
            Public <span class="ml-2 text-xs font-mono text-gray-400 select-none dark:text-gray-500">🔒</span>
          </p>
        </div>
      </div>

      <!-- Textarea for post content -->
      <textarea placeholder="What's on your mind?" rows="5" class="w-full p-4 mb-6 rounded-lg resize-none text-gray-800 bg-gray-100 border border-gray-300 dark:bg-neutral-800 dark:border-neutral-700 dark:text-gray-200 outline-none
                 shadow-inner-lg shadow-gray-300/50 dark:shadow-neutral-900/50
                 focus:border-blue-400 focus:ring-2 focus:ring-blue-300 dark:focus:border-blue-600 dark:focus:ring-blue-800
                 placeholder:text-gray-400 dark:placeholder:text-gray-500
                 font-sans custom-scroll-light dark:custom-scroll-dark
                 transition-all duration-300 ease-in-out"></textarea>

      <!-- Action Buttons Mimicking physical buttons -->
      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <button class="w-full flex items-center justify-center p-3 rounded-xl bg-gradient-to-br from-green-400 to-green-600 text-white font-semibold
                       shadow-lg shadow-green-500/50 dark:shadow-green-700/50 border border-green-500 dark:border-green-600
                       hover:scale-105 active:scale-95 transition-all duration-200 ease-out
                       transform -rotate-1 hover:rotate-0 group-hover:rotate-0
                       drop-shadow-lg text-shadow-sm
                       dark:from-green-600 dark:to-green-800 dark:hover:from-green-500 dark:hover:to-green-700">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-4 4 4 4-4V5h-2l-4 4-2-2-6 6z" clip-rule="evenodd"></path></svg>
          Photo
        </button>
        <button class="w-full flex items-center justify-center p-3 rounded-xl bg-gradient-to-br from-blue-400 to-blue-600 text-white font-semibold
                       shadow-lg shadow-blue-500/50 dark:shadow-blue-700/50 border border-blue-500 dark:border-blue-600
                       hover:scale-105 active:scale-95 transition-all duration-200 ease-out
                       transform rotate-1 hover:rotate-0 group-hover:rotate-0
                       drop-shadow-lg text-shadow-sm
                       dark:from-blue-600 dark:to-blue-800 dark:hover:from-blue-500 dark:hover:to-blue-700">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 012 14v.001A1 1 0 003 15h14a1 1 0 001-1v-.001a1 1 0 01-1.707-.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
          Live
        </button>
        <button class="w-full flex items-center justify-center p-3 rounded-xl bg-gradient-to-br from-purple-400 to-purple-600 text-white font-semibold
                       shadow-lg shadow-purple-500/50 dark:shadow-purple-700/50 border border-purple-500 dark:border-purple-600
                       hover:scale-105 active:scale-95 transition-all duration-200 ease-out
                       transform -rotate-1 hover:rotate-0 group-hover:rotate-0
                       drop-shadow-lg text-shadow-sm
                       dark:from-purple-600 dark:to-purple-800 dark:hover:from-purple-500 dark:hover:to-purple-700">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a3 3 0 016 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd"></path></svg>
          File
        </button>
        <button class="w-full flex items-center justify-center p-3 rounded-xl bg-gradient-to-br from-yellow-400 to-yellow-600 text-white font-semibold
                       shadow-lg shadow-yellow-500/50 dark:shadow-yellow-700/50 border border-yellow-500 dark:border-yellow-600
                       hover:scale-105 active:scale-95 transition-all duration-200 ease-out
                       transform rotate-1 hover:rotate-0 group-hover:rotate-0
                       drop-shadow-lg text-shadow-sm
                       dark:from-yellow-600 dark:to-yellow-800 dark:hover:from-yellow-500 dark:hover:to-yellow-700">
          <svg class="w-5 h-5 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 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></svg>
          Poll
        </button>
      </div>

      <!-- Post Button - Resembles a large, clickable physical button -->
      <button class="w-full py-4 text-2xl font-bold bg-gradient-to-br from-cyan-400 to-cyan-600 rounded-xl text-white
                     shadow-2xl shadow-cyan-500/60 dark:shadow-cyan-700/60 border-2 border-cyan-400 dark:border-cyan-600
                     transform transition-all duration-300 ease-out hover:scale-102 active:scale-98
                     active:shadow-inner-lg active:shadow-cyan-700/70 dark:active:shadow-cyan-900/70
                     drop-shadow-lg text-shadow-lg
                     dark:from-cyan-600 dark:to-cyan-800 dark:hover:from-cyan-500 dark:hover:to-cyan-700">
        Post Now
      </button>

    </div>

    <!-- Bottom Bezel / Shadow -->
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-gray-400 rounded-b-2xl opacity-75 dark:bg-neutral-800 dark:opacity-50 group-hover:h-6 transition-all duration-300 transform translate-y-1"></div>

  </div>
</div>

<style>
/* Define text shadow */
.text-shadow-sm {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.text-shadow-lg {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/* Define inner shadow utility classes */
.shadow-inner {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
.shadow-inner-sm {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.shadow-inner-lg {
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3);
}
.shadow-inner-md {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Custom scrollbar for textarea */
.custom-scroll-light::-webkit-scrollbar {
  width: 8px;
  border-radius: 4px;
}

.custom-scroll-light::-webkit-scrollbar-track {
  background: #e0e0e0;
  border-radius: 4px;
}

.custom-scroll-light::-webkit-scrollbar-thumb {
  background: #a0a0a0;
  border-radius: 4px;
  border: 2px solid #e0e0e0;
}

.custom-scroll-light::-webkit-scrollbar-thumb:hover {
  background: #808080;
}

/* Dark mode scrollbar */
.dark .custom-scroll-dark::-webkit-scrollbar {
  width: 8px;
  border-radius: 4px;
}

.dark .custom-scroll-dark::-webkit-scrollbar-track {
  background: #333333;
  border-radius: 4px;
}

.dark .custom-scroll-dark::-webkit-scrollbar-thumb {
  background: #666666;
  border-radius: 4px;
  border: 2px solid #333333;
}

.dark .custom-scroll-dark::-webkit-scrollbar-thumb:hover {
  background: #888888;
}

/* 3D transforms for skeuomorphism */
.perspective-1000 {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.rotateX-3 {
  transform: rotateX(3deg);
}

@media (max-width: 768px) {
  .rotateX-3,
  .group:hover .rotateX-0,
  .group:hover .translateZ-10 {
    transform: none; /* Disable 3D transforms on small screens */
  }
  .group:hover .scale-105,
  .group:hover .scale-102 {
    transform: scale(1.02); /* Slight scale on mobile hover */
  }
}

</style>

レトロブッキングモーダル

パステルカラー、レスポンシブデザイン、ダークモードのサポートを備えたレトロなテーマの予約/予約モーダルコンポーネントで、予約システムに適しています。

開けるプレビュー

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/50 dark:bg-gray-900/75 font-mono">
  <div class="relative w-full max-w-md mx-auto bg-gradient-to-br from-purple-200 to-pink-200 dark:from-purple-800 dark:to-pink-800 p-6 rounded-lg shadow-xl border-4 border-purple-400 dark:border-purple-600 animate-slide-in-bck-center transform transition-all duration-300 ease-in-out">
    <!-- Top Bar with Buttons -->
    <div class="flex items-center justify-between pb-4 mb-4 border-b-2 border-purple-400 dark:border-purple-600">
      <div class="flex space-x-2">
        <span class="block w-3 h-3 bg-red-500 rounded-full border border-red-700"></span>
        <span class="block w-3 h-3 bg-yellow-500 rounded-full border border-yellow-700"></span>
        <span class="block w-3 h-3 bg-green-500 rounded-full border border-green-700"></span>
      </div>
      <h2 class="text-lg font-bold text-gray-800 dark:text-gray-100 uppercase tracking-widest">Book Slot</h2>
      <button class="text-gray-800 dark:text-gray-100 hover:text-red-600 dark:hover:text-red-400 transition-colors duration-200">
        <svg class="w-6 h-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>

    <!-- Content Area -->
    <div class="space-y-4">
      <div>
        <label for="service" class="block text-gray-700 dark:text-gray-200 text-sm font-semibold mb-1">Select Service:</label>
        <select id="service" class="w-full p-2 bg-purple-100 dark:bg-purple-700 border-2 border-purple-400 dark:border-purple-600 rounded-md text-gray-800 dark:text-gray-100 focus:ring-2 focus:ring-pink-400 focus:outline-none transition-colors duration-200 appearance-none bg-no-repeat bg-[length:1em] bg-[position:calc(100%-0.5em)_center] [background-image:url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%20fill%3D%27none%27%20stroke%3D%27rgb%28129%2C%20140%2C%20248%29%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%276%209%2012%2015%2018%209%27%2F%3E%3C%2Fsvg%3E')] dark:[background-image:url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%20fill%3D%27none%27%20stroke%3D%27rgb%28209%2C%20213%2C%20219%29%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%276%209%2012%2015%2018%209%27%2F%3E%3C%2Fsvg%3E')] overflow-hidden whitespace-nowrap text-ellipsis">
          <option value="">-- Choose a service --</option>
          <option value="facial">Facial Treatment</option>
          <option value="massage">Relaxing Massage</option>
          <option value="nails">Manicure & Pedicure</option>
          <option value="haircut">Haircut & Styling</option>
        </select>
      </div>

      <div>
        <label for="date" class="block text-gray-700 dark:text-gray-200 text-sm font-semibold mb-1">Date:</label>
        <input type="date" id="date" class="w-full p-2 bg-purple-100 dark:bg-purple-700 border-2 border-purple-400 dark:border-purple-600 rounded-md text-gray-800 dark:text-gray-100 focus:ring-2 focus:ring-pink-400 focus:outline-none transition-colors duration-200">
      </div>

      <div>
        <label for="time" class="block text-gray-700 dark:text-gray-200 text-sm font-semibold mb-1">Time:</label>
        <input type="time" id="time" class="w-full p-2 bg-purple-100 dark:bg-purple-700 border-2 border-purple-400 dark:border-purple-600 rounded-md text-gray-800 dark:text-gray-100 focus:ring-2 focus:ring-pink-400 focus:outline-none transition-colors duration-200">
      </div>

      <div>
        <label class="block text-gray-700 dark:text-gray-200 text-sm font-semibold mb-1">Your Information:</label>
        <input type="text" placeholder="Your Name" class="w-full p-2 mb-2 bg-purple-100 dark:bg-purple-700 border-2 border-purple-400 dark:border-purple-600 rounded-md text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-300 focus:ring-2 focus:ring-pink-400 focus:outline-none transition-colors duration-200">
        <input type="email" placeholder="Your Email" class="w-full p-2 bg-purple-100 dark:bg-purple-700 border-2 border-purple-400 dark:border-purple-600 rounded-md text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-300 focus:ring-2 focus:ring-pink-400 focus:outline-none transition-colors duration-200">
      </div>

      <div class="flex items-center space-x-3 pt-2">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Stylist Avatar" class="w-16 h-16 rounded-full border-2 border-pink-400 dark:border-pink-600 shadow-md">
        <div>
          <p class="text-gray-800 dark:text-gray-100 text-sm font-semibold">Stylist:</p>
          <p class="text-gray-600 dark:text-gray-300 text-base font-bold uppercase">Cassandra Byte</p>
        </div>
      </div>
    </div>

    <!-- Action Buttons -->
    <div class="pt-6 border-t-2 border-purple-400 dark:border-purple-600 mt-4 flex justify-end space-x-3">
      <button class="px-5 py-2 bg-pink-400 hover:bg-pink-500 dark:bg-pink-600 dark:hover:bg-pink-700 text-white dark:text-gray-100 font-bold rounded-md shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-105 border-2 border-pink-500 dark:border-pink-700 uppercase tracking-wider">
        Confirm Booking
      </button>
      <button class="px-5 py-2 bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-100 font-bold rounded-md shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-105 border-2 border-gray-400 dark:border-gray-800 uppercase tracking-wider">
        Cancel
      </button>
    </div>
  </div>
</div>

<style>
  /* Keyframes for the slide-in animation */
  @keyframes slide-in-bck-center {
    0% {
      transform: translateZ(600px) translateY(400px);
      opacity: 0;
    }
    100% {
      transform: translateZ(0) translateY(0);
      opacity: 1;
    }
  }
  .animate-slide-in-bck-center {
    animation: slide-in-bck-center 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  select {
    /* Custom arrow for select dropdown */
    background-repeat: no-repeat;
    background-position: right 0.7em top 50%;
    background-size: 0.65em auto;
  }

  /* Override default date/time input icons for better retro feel if needed, though most browsers don't allow it easily */
  /* webkit browsers */
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(40%) sepia(20%) saturate(1000%) hue-rotate(200deg) brightness(80%) contrast(90%); /* Example for light mode */
  }

  .dark input[type="date"]::-webkit-calendar-picker-indicator,
  .dark input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(80%) sepia(50%) saturate(200%) hue-rotate(300deg) brightness(120%) contrast(90%); /* Example for dark mode */
  }

  /* Firefox */
  @-moz-document url-prefix() {
    input[type="date"],
    input[type="time"] {
      color-scheme: light;
    }
    .dark input[type="date"],
    .dark input[type="time"] {
      color-scheme: dark;
    }
  }
</style>

Industrial_Sepia_Medical_Modal

セピア/ブラウンの色調を使用し、ヘルスケア/医療用途向けに設計された、工業的な原材料の美学を備えたシンプルで応答性の高いモーダルコンポーネントで、ダークモードがサポートされています。

開けるプレビュー

                <div class="fixed inset-0 bg-gray-900 bg-opacity-75 dark:bg-black dark:bg-opacity-85 flex items-center justify-center p-4 z-50">
  <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl max-w-lg w-full transform transition-all duration-300 ease-out scale-95 opacity-0 sm:scale-100 sm:opacity-100 border border-stone-400 dark:border-stone-700 overflow-hidden">
    <!-- Header -->
    <div class="bg-stone-300 dark:bg-stone-700 p-4 border-b border-stone-400 dark:border-stone-600 flex justify-between items-center">
      <h3 class="text-lg font-mono tracking-wide uppercase text-stone-800 dark:text-stone-200">Patient Details</h3>
      <button class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-800 p-1 rounded-full">
        <svg class="w-6 h-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>

    <!-- Body -->
    <div class="p-6 space-y-4 text-stone-700 dark:text-stone-300">
      <div class="flex items-center space-x-4">
        <img class="w-16 h-16 rounded-full border-2 border-stone-400 dark:border-stone-600 object-cover" src="https://randomuser.me/api/portraits/men/5.jpg" alt="Patient Avatar">
        <div>
          <p class="font-semibold text-xl">John Doe</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">ID: P102938</p>
        </div>
      </div>
      <p class="text-sm text-stone-800 dark:text-stone-200 leading-relaxed font-mono">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
        <div>
          <p class="font-medium">Age:</p>
          <p>45</p>
        </div>
        <div>
          <p class="font-medium">Blood Type:</p>
          <p>O+</p>
        </div>
        <div>
          <p class="font-medium">Last Visit:</p>
          <p>2023-10-26</p>
        </div>
        <div>
          <p class="font-medium">Status:</p>
          <p><span class="px-2 py-0.5 rounded-full bg-yellow-600 dark:bg-yellow-700 text-white text-xs font-semibold">Stable</span></p>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <div class="bg-stone-300 dark:bg-stone-700 p-4 border-t border-stone-400 dark:border-stone-600 flex justify-end space-x-3">
      <button class="px-5 py-2 text-sm font-mono tracking-wide text-stone-700 dark:text-stone-300 bg-stone-400 dark:bg-stone-600 hover:bg-stone-500 dark:hover:bg-stone-500 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:ring-offset-stone-300 dark:focus:ring-offset-stone-700">
        Close
      </button>
      <button class="px-5 py-2 text-sm font-mono tracking-wide text-white bg-amber-700 dark:bg-amber-800 hover:bg-amber-800 dark:hover:bg-amber-900 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-300 dark:focus:ring-offset-stone-700">
        View Record
      </button>
    </div>
  </div>
</div>

ネオンダッシュボードモーダル

ネオン/グロー効果、秋の色、ダークモードのサポート、インタラクティブ要素を使用した、複雑で応答性の高いダッシュボードモーダル。データの視覚化とコントロールパネル用に設計されています。

開けるプレビュー

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 backdrop-blur-sm dark:bg-black dark:bg-opacity-85">
    <div class="relative w-full max-w-4xl p-8 overflow-hidden rounded-lg shadow-xl bg-gradient-to-br from-orange-800 to-red-900 ring-4 ring-orange-400/50 dark:from-orange-900 dark:to-red-950 dark:ring-red-700/60 transition-all duration-300 transform scale-95 opacity-0 animate-scale-in glow-effect-container">
        <style>
            @keyframes scale-in {
                from { transform: scale(0.95); opacity: 0; }
                to { transform: scale(1); opacity: 1; }
            }
            .animate-scale-in {
                animation: scale-in 0.3s ease-out forwards;
            }
            .glow-effect-container::before {
                content: '';
                position: absolute;
                top: -10px;
                left: -10px;
                right: -10px;
                bottom: -10px;
                border-radius: 12px; /* Slightly larger than element's border-radius */
                background: conic-gradient(from var(--angle), #fb923c, #f97316, #ea580c, #c2410c, #b45309, #fb923c);
                background-size: 200% 200%;
                filter: blur(15px);
                z-index: -1;
                animation: rotate 4s linear infinite;
                opacity: 0.7;
            }
            .dark .glow-effect-container::before {
                background: conic-gradient(from var(--angle), #ef4444, #dc2626, #b91c1c, #991b1b, #7f1d1d, #ef4444);
            }
            @keyframes rotate {
                to { --angle: 360deg; }
            }
            @property --angle {
                syntax: '<angle>';
                inherits: false;
                initial-value: 0deg;
            }
        </style>
        <button class="absolute top-4 right-4 text-orange-200 hover:text-orange-100 dark:text-red-300 dark:hover:text-red-200 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-red-400 rounded-full p-2">
            <svg class="w-8 h-8" 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>

        <h2 class="mb-6 text-4xl font-extrabold text-orange-100 drop-shadow-lg text-center dark:text-red-100 sm:text-5xl">
            Dashboard Insights <span class="text-orange-300 dark:text-red-200">Overview</span>
        </h2>

        <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
            <!-- Card 1: Sales Performance -->
            <div class="p-6 rounded-lg bg-orange-700/60 backdrop-blur-sm shadow-lg ring-2 ring-orange-500/50 dark:bg-red-900/60 dark:ring-red-700/50 transition-all duration-300 hover:scale-[1.02] hover:ring-orange-400 dark:hover:ring-red-600">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-2xl font-bold text-orange-100 dark:text-red-200">Sales Performance</h3>
                    <svg class="w-10 h-10 text-orange-300 dark:text-red-400" 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="M13 7h8m0 0v8m0-8L13 17.5M4 16l3-3m0 0l3-3m-3 3l-3 3M17 14l-3-3m0 0l-3-3m3 3l-3 3"></path></svg>
                </div>
                <p class="text-5xl font-extrabold text-orange-200 dark:text-red-300 drop-shadow-md mb-2">$15.2K</p>
                <p class="text-orange-300 dark:text-red-400">+12% from last month</p>
                <div class="w-full h-2 mt-4 rounded-full bg-orange-600 dark:bg-red-800 overflow-hidden">
                    <div class="h-full rounded-full bg-orange-300 dark:bg-red-500 w-3/4"></div>
                </div>
            </div>

            <!-- Card 2: User Engagement -->
            <div class="p-6 rounded-lg bg-orange-700/60 backdrop-blur-sm shadow-lg ring-2 ring-orange-500/50 dark:bg-red-900/60 dark:ring-red-700/50 transition-all duration-300 hover:scale-[1.02] hover:ring-orange-400 dark:hover:ring-red-600">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-2xl font-bold text-orange-100 dark:text-red-200">User Engagement</h3>
                    <svg class="w-10 h-10 text-orange-300 dark:text-red-400" 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 20h5v-5a3 3 0 00-3-3H6a3 3 0 00-3 3v5h5M7 13v-3a2 2 0 012-2h4a2 2 0 012 2v3m7 0l2 2m-2-2l-2-2m2 2L13 9.5"></path></svg>
                </div>
                <p class="text-5xl font-extrabold text-orange-200 dark:text-red-300 drop-shadow-md mb-2">2.8K</p>
                <p class="text-orange-300 dark:text-red-400">+5% new sign-ups</p>
                <div class="flex items-center mt-4">
                    <img class="w-8 h-8 rounded-full border-2 border-orange-400 dark:border-red-600 mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User 1">
                    <img class="w-8 h-8 rounded-full border-2 border-orange-400 dark:border-red-600 -ml-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User 2">
                    <img class="w-8 h-8 rounded-full border-2 border-orange-400 dark:border-red-600 -ml-3" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User 3">
                    <span class="ml-2 text-orange-200 dark:text-red-300">+15 more</span>
                </div>
            </div>

            <!-- Card 3: Traffic Sources -->
            <div class="p-6 rounded-lg bg-orange-700/60 backdrop-blur-sm shadow-lg ring-2 ring-orange-500/50 dark:bg-red-900/60 dark:ring-red-700/50 transition-all duration-300 hover:scale-[1.02] hover:ring-orange-400 dark:hover:ring-red-600">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-2xl font-bold text-orange-100 dark:text-red-200">Traffic Sources</h3>
                    <svg class="w-10 h-10 text-orange-300 dark:text-red-400" 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 12l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18 9 9 0 010-18z"></path></svg>
                </div>
                <ul class="text-orange-200 dark:text-red-300 space-y-2 text-lg">
                    <li class="flex justify-between">Direct <span class="font-semibold">40%</span></li>
                    <li class="flex justify-between">Search <span class="font-semibold">30%</span></li>
                    <li class="flex justify-between">Referral <span class="font-semibold">20%</span></li>
                    <li class="flex justify-between">Social <span class="font-semibold">10%</span></li>
                </ul>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="flex flex-col sm:flex-row justify-end mt-8 gap-4">
            <button class="px-8 py-3 rounded-full font-bold text-lg text-orange-100 bg-orange-600 hover:bg-orange-700 ring-2 ring-orange-400 hover:ring-orange-300 dark:bg-red-800 dark:hover:bg-red-900 dark:ring-red-700 dark:hover:ring-red-600 transition-all duration-300 shadow-lg neon-button">
                View Full Report
            </button>
            <button class="px-8 py-3 rounded-full font-bold text-lg text-orange-900 bg-orange-300 hover:bg-orange-200 ring-2 ring-orange-200 hover:ring-orange-100 dark:text-red-900 dark:bg-red-400 dark:hover:bg-red-300 dark:ring-red-300 dark:hover:ring-red-200 transition-all duration-300 shadow-lg neon-button">
                Customize Dashboard
            </button>
            <style>
                .neon-button {
                    box-shadow: 0 0 5px rgba(251, 146, 60, 0.7), 0 0 15px rgba(251, 146, 60, 0.5), 0 0 30px rgba(251, 146, 60, 0.3);
                }
                .dark .neon-button {
                    box-shadow: 0 0 5px rgba(239, 68, 68, 0.7), 0 0 15px rgba(239, 68, 68, 0.5), 0 0 30px rgba(239, 68, 68, 0.3);
                }
                .neon-button:hover {
                    transform: scale(1.03);
                    box-shadow: 0 0 8px rgba(251, 146, 60, 0.9), 0 0 20px rgba(251, 146, 60, 0.7), 0 0 40px rgba(251, 146, 60, 0.5);
                }
                .dark .neon-button:hover {
                    box-shadow: 0 0 8px rgba(239, 68, 68, 0.9), 0 0 20px rgba(239, 68, 68, 0.7), 0 0 40px rgba(239, 68, 68, 0.5);
                }
            </style>
        </div>
    </div>
</div>

モーダルコンポーネント

ネオン/電気勾配設計の複雑で応答性の高いモーダルコンポーネントで、ビジネス/企業のWebサイトに適しています。スムーズなトランジション、ダークモードのサポート、複数のインタラクティブ要素を備えています。

開けるプレビュー

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
  <!-- Backdrop -->
  <div class="fixed inset-0 bg-gray-900 bg-opacity-75 backdrop-blur-sm transition-opacity duration-300 ease-in-out dark:bg-black dark:bg-opacity-85"></div>

  <!-- Modal Content -->
  <div class="relative w-full max-w-xl md:max-w-3xl lg:max-w-4xl xl:max-w-5xl overflow-hidden rounded-2xl bg-gray-100 dark:bg-gray-900 shadow-xl border-2 border-transparent 
              bg-gradient-to-br from-purple-500/10 via-pink-500/10 to-blue-500/10
              dark:from-purple-800/20 dark:via-pink-800/20 dark:to-blue-800/20
              transform transition-all duration-300 ease-out sm:scale-100 sm:opacity-100
              ring-2 ring-offset-2 ring-offset-gray-100 ring-purple-500
              dark:ring-offset-gray-900 dark:ring-purple-700
              ">

    <div class="absolute inset-0 block md:hidden lg:block filter blur-3xl opacity-30 pointer-events-none">
        <div class="absolute top-0 left-1/4 h-24 w-24 rounded-full bg-pink-500 animate-pulse"></div>
        <div class="absolute bottom-0 right-1/4 h-24 w-24 rounded-full bg-blue-500 animate-pulse animation-delay-200"></div>
        <div class="absolute top-1/2 left-1/2 h-24 w-24 rounded-full bg-purple-500 animate-pulse animation-delay-400"></div>
    </div>

    <div class="relative flex flex-col p-6 sm:p-8 md:p-10 z-10">

      <!-- Modal Header -->
      <div class="flex items-start justify-between pb-4 sm:pb-6 border-b border-purple-500/30 dark:border-purple-700/30 mb-6">
        <div>
          <h2 class="text-2xl sm:text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-blue-500 dark:from-pink-400 dark:to-blue-400 leading-tight">
            Welcome to Our Platform
          </h2>
          <p class="mt-2 text-base text-gray-700 dark:text-gray-300 max-w-md">
            Unlock your potential with our cutting-edge business solutions. Join us today!
          </p>
        </div>
        <button type="button" class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-colors duration-200">
          <span class="sr-only">Close modal</span>
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Modal Body - Grid Layout for content -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
        <div class="flex flex-col gap-4">
          <!-- Feature 1 -->
          <div class="p-4 rounded-xl shadow-inner bg-gradient-to-br from-purple-500/5 to-pink-500/5 dark:from-purple-800/10 dark:to-pink-800/10 border border-purple-500/10 dark:border-purple-700/10">
            <h3 class="text-lg font-semibold text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-yellow-400 dark:from-pink-300 dark:to-yellow-300 mb-2">Advanced Analytics</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Gain deep insights with our powerful, real-time data analysis tools.</p>
          </div>

          <!-- Feature 2 -->
          <div class="p-4 rounded-xl shadow-inner bg-gradient-to-br from-blue-500/5 to-green-500/5 dark:from-blue-800/10 dark:to-green-800/10 border border-blue-500/10 dark:border-blue-700/10">
            <h3 class="text-lg font-semibold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-green-400 dark:from-blue-300 dark:to-green-300 mb-2">Seamless Collaboration</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Connect and collaborate effortlessly with your team, anywhere, anytime.</p>
          </div>

          <!-- Testimonial/Quote -->
          <figure class="mt-4 p-4 rounded-xl shadow-lg bg-gradient-to-br from-gray-200/50 to-gray-50/50 dark:from-gray-800/50 dark:to-gray-900/50 border border-gray-300/30 dark:border-gray-700/30 relative overflow-hidden">
              <blockquote class="text-gray-700 dark:text-gray-300 italic relative z-10">
                  "This platform has revolutionized our workflow. The support and features are unparalleled!"
              </blockquote>
              <figcaption class="mt-4 flex items-center gap-3 relative z-10">
                  <img class="h-10 w-10 rounded-full object-cover ring-2 ring-pink-500/50 hover:ring-pink-400 transition-all duration-200" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Customer Avatar">
                  <div>
                      <div class="font-semibold text-gray-800 dark:text-gray-200">Jane Doe</div>
                      <div class="text-sm text-gray-500 dark:text-gray-400">CEO, Tech Innovations</div>
                  </div>
              </figcaption>
              <div class="absolute inset-0 bg-gradient-to-br from-indigo-500/5 via-fuchsia-500/5 to-cyan-500/5 dark:from-indigo-800/5 dark:via-fuchsia-800/5 dark:to-cyan-800/5 blur-xl pointer-events-none"></div>
          </figure>

        </div>

        <!-- Contact Form / CTA Section -->
        <div class="flex flex-col gap-4">
          <form class="p-6 rounded-xl shadow-lg bg-gradient-to-br from-blue-500/5 to-purple-500/5 dark:from-blue-800/10 dark:to-purple-800/10 border border-blue-500/10 dark:border-blue-700/10">
            <h3 class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400 dark:from-blue-300 dark:to-purple-300 mb-4">Request a Demo</h3>
            <div class="mb-4">
              <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>
              <input type="text" id="name" class="w-full p-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 dark:placeholder-gray-400 transition-all duration-200" placeholder="Your Name">
            </div>
            <div class="mb-4">
              <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Work Email</label>
              <input type="email" id="email" class="w-full p-3 rounded-lg border border-gray-300 focus:border-pink-500 focus:ring-1 focus:ring-pink-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 dark:placeholder-gray-400 transition-all duration-200" placeholder="[email protected]">
            </div>
            <div class="mb-6">
              <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message (Optional)</label>
              <textarea id="message" rows="3" class="w-full p-3 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 dark:placeholder-gray-400 transition-all duration-200" placeholder="Tell us about your needs..."></textarea>
            </div>
            <button type="submit" class="w-full py-3 px-6 rounded-xl font-bold text-lg text-white 
                            bg-gradient-to-r from-pink-500 to-blue-500 hover:from-pink-600 hover:to-blue-600 
                            dark:from-pink-600 dark:to-blue-600 dark:hover:from-pink-700 dark:hover:to-blue-700 
                            shadow-lg transform hover:scale-105 transition-all duration-300 ease-out 
                            focus:outline-none focus:ring-4 focus:ring-pink-500/50 dark:focus:ring-pink-700/50">
              Submit Request
            </button>
          </form>

          <!-- Small image gallery/showcase -->
          <div class="mt-4 grid grid-cols-2 gap-4">
              <img src="https://picsum.photos/400/300?random=1" alt="Placeholder Image 1" class="rounded-lg shadow-md object-cover w-full h-32 hover:scale-105 transition-transform duration-200 border-2 border-purple-500/20 dark:border-purple-700/20">
              <img src="https://picsum.photos/400/300?random=2" alt="Placeholder Image 2" class="rounded-lg shadow-md object-cover w-full h-32 hover:scale-105 transition-transform duration-200 border-2 border-blue-500/20 dark:border-blue-700/20">
          </div>

        </div>
      </div>

      <!-- Modal Footer -->
      <div class="mt-8 flex justify-end pt-6 border-t border-blue-500/30 dark:border-blue-700/30">
        <button type="button" class="py-2 px-5 rounded-lg font-semibold text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 
                        border border-transparent hover:border-gray-300 dark:hover:border-gray-700 
                        focus:outline-none focus:ring-2 focus:ring-purple-500 transition-all duration-200">
          Learn More
        </button>
        <button type="button" class="ml-4 py-2 px-5 rounded-lg font-semibold text-white 
                        bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 
                        dark:from-purple-600 dark:to-pink-600 dark:hover:from-purple-700 dark:hover:to-pink-700 
                        shadow-md transform hover:scale-105 transition-all duration-300 ease-out 
                        focus:outline-none focus:ring-4 focus:ring-purple-500/50 dark:focus:ring-purple-700/50">
          Get Started Now
        </button>
      </div>

    </div>
  </div>
</div>

<style>
/* Define keyframes for subtle pulsating gradient blobs */
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.5; }
  100% { transform: scale(1); opacity: 0.3; }
}

.animate-pulse {
  animation: pulse 4s infinite ease-in-out;
}

.animation-delay-200 {
    animation-delay: 0.2s;
}
.animation-delay-400 {
    animation-delay: 0.4s;
}
</style>

サイバーパンク学習モーダル

教育プラットフォーム向けのレスポンシブでサイバーパンクをテーマにしたモーダルコンポーネントで、暗い背景、ネオンのアクセント、インタラクティブな要素が特徴です。ダークモードをサポートします。

開けるプレビュー

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-70 backdrop-blur-sm">
  <div class="relative w-full max-w-lg mx-auto overflow-hidden text-white rounded-lg shadow-xl dark:shadow-purple-glow bg-gradient-to-br from-gray-900 to-black border-2 border-purple-600 dark:border-purple-500 animate-fade-in-up">
    <!-- Close Button - Top Right -->
    <button class="absolute top-3 right-3 p-2 text-purple-300 hover:text-cyan-400 focus:outline-none transition-colors duration-300 z-10">
      <svg class="w-6 h-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>

    <!-- Header with animated border -->
    <div class="p-6 pb-4 border-b-2 border-purple-600 relative overflow-hidden">
      <h2 class="text-3xl font-bold text-center text-purple-300 dark:text-purple-400 drop-shadow-lg leading-tight">
        <span class="text-cyan-400">//</span> MODULE 01: NEURAL NETWORKS <span class="text-cyan-400">//</span>
      </h2>
      <div class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-cyan-400 to-transparent animate-scan"></div>
    </div>

    <!-- Content Area -->
    <div class="p-6 space-y-6 md:p-8">
      <p class="text-gray-300 text-lg leading-relaxed dark:text-gray-400">
        Dive deep into the pulsating heart of artificial intelligence. Unravel the mysteries of perceptrons, backpropagation, and the very fabric of machine cognition.
      </p>
      
      <div class="relative w-full h-48 rounded-md overflow-hidden border border-cyan-500 shadow-lg shadow-cyan-900/50">
        <img src="https://picsum.photos/600/300?random=1" alt="Course thumbnail" class="object-cover object-center w-full h-full opacity-80 group-hover:opacity-100 transition-opacity duration-300" />
        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center group-hover:bg-opacity-30 transition-all duration-300">
          <span class="text-xl font-semibold text-white/90 drop-shadow-md">Visualizing the Network</span>
        </div>
      </div>

      <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 py-2 border-t-2 border-b-2 border-purple-800 dark:border-purple-900 bg-gray-900/50">
        <div class="flex items-center gap-3">
          <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Instructor Avatar" class="w-10 h-10 rounded-full border-2 border-cyan-400 shadow-md" />
          <span class="text-sm text-gray-200">Lead Instructor: <span class="font-medium text-purple-300">Dr. Evelyn Reed</span></span>
        </div>
        <div class="flex items-center gap-4 text-sm text-gray-300">
          <span class="flex items-center gap-1">
            <svg class="w-4 h-4 text-cyan-400" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            60 min
          </span>
          <span class="flex items-center gap-1">
            <svg class="w-4 h-4 text-purple-400" 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>
            Expert Level
          </span>
        </div>
      </div>

      <div class="space-y-4">
        <h3 class="text-xl font-bold text-cyan-400">Key Concepts:</h3>
        <ul class="list-none p-0 m-0 space-y-2">
          <li class="flex items-start gap-2 text-gray-300">
            <svg class="w-5 h-5 mt-1 text-purple-500 flex-shrink-0" 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
            </svg>
            Understanding Perceptrons and Activation Functions.
          </li>
          <li class="flex items-start gap-2 text-gray-300">
            <svg class="w-5 h-5 mt-1 text-purple-500 flex-shrink-0" 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
            </svg>
            Implementing Backpropagation for Learning.
          </li>
          <li class="flex items-start gap-2 text-gray-300">
            <svg class="w-5 h-5 mt-1 text-purple-500 flex-shrink-0" 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
            </svg>
            Exploring Convolutional and Recurrent Networks.
          </li>
        </ul>
      </div>
    </div>

    <!-- Footer Buttons -->
    <div class="p-6 pt-4 flex flex-col sm:flex-row justify-end gap-3 border-t-2 border-purple-600">
      <button class="px-6 py-3 text-sm font-semibold rounded-md transition-all duration-300 
                     bg-transparent border-2 border-purple-500 text-purple-300 
                     hover:bg-purple-700 hover:border-purple-700 hover:text-white 
                     focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900 
                     dark:hover:bg-purple-600 dark:border-purple-600 dark:focus:ring-offset-black">
        <span class="text-cyan-400 text-lg mr-1">&lt;&lt;</span> Back to Modules
      </button>
      <button class="px-8 py-3 text-sm font-bold rounded-md transition-all duration-300 
                     bg-cyan-500 text-gray-900 border-2 border-cyan-500 
                     shadow-lg shadow-cyan-500/50 
                     hover:bg-cyan-400 hover:shadow-cyan-400/60 
                     focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:ring-offset-2 focus:ring-offset-gray-900 
                     dark:bg-cyan-600 dark:hover:bg-cyan-500 dark:shadow-cyan-600/50 dark:focus:ring-offset-black">
        Enroll Now <span class="text-purple-900 text-lg ml-1">//</span>
      </button>
    </div>
  </div>

  <!-- Custom CSS for animations and glows (typically in Tailwind config or external CSS) -->
  <style>
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in-up {
      animation: fadeIn 0.4s ease-out forwards;
    }
    
    @keyframes scan {
      0% { transform: translateX(-100%); }
      50% { transform: translateX(0); }
      100% { transform: translateX(100%); }
    }
    .animate-scan {
      animation: scan 3s infinite linear;
    }

    .dark .dark\:shadow-purple-glow {
      box-shadow: 0 0 15px rgba(168, 85, 247, 0.7), 0 0 30px rgba(168, 85, 247, 0.5);
    }
  </style>
</div>

スキューモーフィックモーダル

エンターテインメント/メディアプラットフォーム向けのシンプルで応答性の高いスキューモーフィックにインスパイアされたモーダルコンポーネントで、クールなニュートラルカラーとダークモードのサポートが特徴です。

開けるプレビュー

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-950 bg-opacity-75 dark:bg-black dark:bg-opacity-85">
  <div class="relative w-full max-w-md mx-auto overflow-hidden rounded-xl shadow-2xl
              bg-gradient-to-br from-gray-200 to-gray-400
              dark:from-gray-700 dark:to-gray-900
              border border-gray-300 dark:border-gray-600
              transform transition-all duration-300 ease-in-out
              scale-95 opacity-0 animate-modal-open
              sm:p-6 p-4">

    <!-- Close Button - Mimics a physical button -->
    <button class="absolute top-3 right-3 text-gray-600 dark:text-gray-300
                   focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-200
                   dark:focus:ring-gray-400 dark:focus:ring-offset-gray-800
                   p-2 rounded-full
                   bg-gray-300 dark:bg-gray-800
                   shadow-md inner-shadow-light dark:inner-shadow-dark
                   hover:scale-105 active:scale-95 active:shadow-inner
                   transition-all duration-200 ease-in-out">
      <svg class="w-6 h-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>

    <!-- Modal Header - Embossed text effect -->
    <h2 class="text-2xl font-bold text-gray-700 dark:text-gray-200 mb-4
             text-shadow-emboss dark:text-shadow-emboss-dark sm:text-3xl lg:text-4xl">
      Welcome Back!
    </h2>

    <!-- Content Section - Sunken Panel -->
    <div class="p-4 sm:p-5 mb-6
                bg-gray-100 dark:bg-gray-800
                rounded-lg
                shadow-inner-light dark:shadow-inner-dark
                border border-gray-200 dark:border-gray-700">
      <p class="text-gray-800 dark:text-gray-300 text-base sm:text-lg mb-4 leading-relaxed ">
        Pick up where you left off. Explore new shows and movies curated just for you.
      </p>
      <img class="w-full h-32 sm:h-40 object-cover rounded-md mb-4
                  shadow-md border border-gray-300 dark:border-gray-600"
           src="https://picsum.photos/400/250?random=1" alt="Placeholder image for media content">
      <p class="text-sm text-gray-600 dark:text-gray-400 font-medium">Now Playing: "Mysteries of the Deep"</p>
    </div>

    <!-- Action Buttons - Pill-shaped, pushable buttons -->
    <div class="flex flex-col sm:flex-row gap-4">
      <button class="flex-1 py-3 px-6 rounded-full
                     bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800
                     text-white font-semibold text-lg
                     shadow-md inner-shadow-blue dark:inner-shadow-blue-dark
                     hover:scale-105 active:scale-98 active:shadow-inner
                     transition-all duration-200 ease-in-out
                     focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-200
                     dark:focus:ring-blue-400 dark:focus:ring-offset-gray-800">
        Continue Watching
      </button>
      <button class="flex-1 py-3 px-6 rounded-full
                     bg-gradient-to-br from-gray-300 to-gray-500 dark:from-gray-600 dark:to-gray-800
                     text-gray-800 dark:text-gray-200 font-semibold text-lg
                     shadow-md inner-shadow-light dark:inner-shadow-dark
                     hover:scale-105 active:scale-98 active:shadow-inner
                     transition-all duration-200 ease-in-out
                     focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-200
                     dark:focus:ring-gray-400 dark:focus:ring-offset-gray-800">
        Browse More
      </button>
    </div>
  </div>
</div>

<!-- Custom Styles for Skeuomorphism -->
<style>
  /* Base for general shadows */
  .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  /* Light Skeuomorphic Inner Shadow */
  .inner-shadow-light {
    box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.7), inset -2px -2px 5px rgba(180, 180, 180, 0.5);
  }
  .dark .inner-shadow-dark {
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.6), inset -2px -2px 5px rgba(100, 100, 100, 0.3);
  }

  /* Light Skeuomorphic Sunken Panel */
  .shadow-inner-light {
    box-shadow: inset 3px 3px 6px rgba(190, 190, 190, 0.6), inset -3px -3px 6px rgba(255, 255, 255, 0.8);
  }
  .dark .shadow-inner-dark {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.7), inset -3px -3px 6px rgba(100, 100, 100, 0.4);
  }

  /* Blue buttons inner shadow */
  .inner-shadow-blue {
      box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3), inset -2px -2px 5px rgba(255,255,255,0.4);
  }
  .dark .inner-shadow-blue-dark {
      box-shadow: inset 2px 2px 5px rgba(0,0,0,0.6), inset -2px -2px 5px rgba(0,50,100,0.3);
  }

  /* Embossed Text Effect */
  .text-shadow-emboss {
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.3);
  }
  .dark .text-shadow-emboss-dark {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(100, 100, 100, 0.3);
  }

  /* Keyframe for modal entry animation */
  @keyframes modal-open {
    from {
      opacity: 0;
      transform: scale(0.95) translateY(20px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  .animate-modal-open {
    animation: modal-open 0.3s ease-out forwards;
  }
</style>

Corporate_Professional_Forum_Modal

フォーラム/コミュニティプラットフォーム向けの複雑で応答性が高く、プロフェッショナルなモーダルコンポーネントで、類似のカラースキームとダークモードのサポートを備えています。

開けるプレビュー

                <div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 flex items-center justify-center p-4 z-50 overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full transform transition-all sm:my-8 sm:align-middle overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="px-4 py-3 sm:px-6 flex justify-between items-center bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-700">
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="modal-title">
        Create New Discussion Topic
      </h3>
      <button type="button" class="text-gray-400 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
        <span class="sr-only">Close panel</span>
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
    <div class="p-4 sm:p-6 space-y-4" id="modal-description">
      <div>
        <label for="topic-title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Topic Title</label>
        <div class="mt-1">
          <input type="text" name="topic-title" id="topic-title" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 rounded-md" placeholder="Enter a concise title" aria-required="true">
        </div>
      </div>

      <div>
        <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Category</label>
        <div class="mt-1">
          <select id="category" name="category" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md dark:bg-gray-900 dark:border-gray-600 dark:text-gray-100">
            <option>General Discussion</option>
            <option>Technical Support</option>
            <option>Feature Requests</option>
            <option>Announcements</option>
          </select>
        </div>
      </div>

      <div>
        <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
        <div class="mt-1">
          <textarea id="description" name="description" rows="5" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md dark:bg-gray-900 dark:border-gray-600 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Share details about your topic..."></textarea>
        </div>
      </div>

      <div class="flex items-center space-x-3">
        <div class="flex-shrink-0">
          <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        </div>
        <div class="min-w-0 flex-1">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Posting as John Doe</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Your post will be visible to all forum members.</p>
        </div>
      </div>

    </div>
    <div class="px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
      <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm dark:bg-blue-700 dark:hover:bg-blue-800">
        Create Topic
      </button>
      <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700">
        Cancel
      </button>
    </div>
  </div>
</div>

Paper_Print_Inspired_Autumn_Modal_Component

紙や印刷物に触発された複雑で応答性の高いモーダルコンポーネントで、秋の色が特徴です。教育プラットフォーム向けに設計されており、ダークモードのサポートとセマンティックHTMLが含まれています。

開けるプレビュー

                <div class="fixed inset-0 z-50 overflow-y-auto bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="relative w-full max-w-3xl bg-amber-50 dark:bg-gray-800 rounded-lg shadow-2xl transform transition-all duration-300 scale-100 opacity-100 border border-amber-200 dark:border-gray-700 overflow-hidden print:shadow-none print:border-none print:transform-none print:flex-initial print:block">
    <!-- Paper textured background (can be achieved via CSS classes if needed, or just color) -->
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/paper-fibers.png')] opacity-10 dark:opacity-[0.03] pointer-events-none"></div>

    <!-- Header - mimics a book/journal cover -->
    <div class="relative p-6 sm:p-8 lg:p-10 bg-gradient-to-r from-red-800 to-amber-900 dark:from-red-900 dark:to-orange-950 text-white border-b-4 border-amber-950 dark:border-red-950 shadow-md flex items-center justify-between">
      <h2 class="text-2xl sm:text-3xl lg:text-4xl font-serif tracking-wide text-amber-100 dark:text-orange-200 drop-shadow-lg">Course Syllabus: Ancient Civilizations</h2>
      <button class="text-orange-100 hover:text-white dark:text-orange-200 dark:hover:text-white text-3xl font-bold p-2 transition-transform transform hover:rotate-3 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500 rounded-full aria-label="Close modal">
        &times;
      </button>
    </div>

    <!-- Content - resembles printed pages -->
    <div class="relative p-6 sm:p-8 lg:p-10 text-gray-800 dark:text-gray-200 flex flex-col lg:flex-row gap-6 sm:gap-8 overflow-y-auto max-h-[70vh]">
      <div class="lg:w-2/3 space-y-6">
        <section class="mb-6 pb-4 border-b border-orange-200 dark:border-gray-700 print:border-b-0">
          <h3 class="text-xl sm:text-2xl font-serif text-red-800 dark:text-orange-400 mb-3">Course Overview</h3>
          <p class="text-base leading-relaxed font-sans text-gray-700 dark:text-gray-300 indent-8">This course offers a comprehensive exploration of major ancient civilizations, from Mesopotamia and Egypt to Greece and Rome. We will delve into their political structures, social hierarchies, cultural achievements, and lasting legacies, examining primary sources and archaeological evidence.</p>
        </section>

        <section class="mb-6 pb-4 border-b border-orange-200 dark:border-gray-700 print:border-b-0">
          <h3 class="text-xl sm:text-2xl font-serif text-red-800 dark:text-orange-400 mb-3">Learning Objectives</h3>
          <ul class="list-disc list-inside space-y-2 text-base font-sans text-gray-700 dark:text-gray-300">
            <li>Identify key characteristics of ancient civilizations.</li>
            <li>Analyze the impact of geography on historical development.</li>
            <li>Evaluate primary sources for historical interpretation.</li>
            <li>Discuss the contributions of ancient societies to modern culture.</li>
          </ul>
        </section>

        <section class="mb-6">
          <h3 class="text-xl sm:text-2xl font-serif text-red-800 dark:text-orange-400 mb-3">Instructor Information</h3>
          <div class="flex items-center space-x-4 mb-4 bg-orange-100 dark:bg-gray-700 p-3 rounded-lg shadow-inner">
            <img class="w-16 h-16 rounded-full border-2 border-orange-400 dark:border-orange-500 object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Instructor Avatar">
            <div>
              <p class="font-semibold text-lg font-serif text-red-900 dark:text-gray-100">Prof. Alistair Finch</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Department of History</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">[email protected]</p>
            </div>
          </div>
          <div class="flex justify-around flex-wrap gap-3">
            <button class="flex-1 min-w-[120px] px-4 py-2 bg-orange-700 hover:bg-orange-800 dark:bg-orange-800 dark:hover:bg-orange-900 text-white rounded-md font-sans text-sm tracking-wide shadow-md transition-all duration-200 transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500">Message Instructor</button>
            <button class="flex-1 min-w-[120px] px-4 py-2 bg-red-700 hover:bg-red-800 dark:bg-red-800 dark:hover:bg-red-900 text-white rounded-md font-sans text-sm tracking-wide shadow-md transition-all duration-200 transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-red-300 dark:focus:ring-red-500">Schedule Office Hours</button>
          </div>
        </section>
      </div>

      <aside class="lg:w-1/3 p-4 bg-orange-100 dark:bg-gray-700 rounded-lg shadow-inner border border-orange-200 dark:border-gray-600 space-y-4">
        <h3 class="text-xl font-serif text-red-800 dark:text-orange-400 mb-3">Resource Links</h3>
        <ul class="space-y-3">
          <li>
            <a href="#" class="block p-3 bg-white dark:bg-gray-800 rounded-md shadow-sm hover:shadow-md transition-shadow font-sans text-base text-gray-900 dark:text-gray-100 flex items-center space-x-3 group">
              <svg class="w-5 h-5 text-red-600 dark:text-orange-500 group-hover:text-red-700 dark:group-hover:text-orange-600" 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.75 17L9 20l-1 1h-5a1 1 0 01-1-1v-1a1 1 0 011-1h4a1 1 0 001-1v-4a1 1 0 00-1-1h-4a1 1 0 01-1-1V5a1 1 0 011-1h5a1 1 0 011-1v1a1 1 0 001 1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 00-1 1z"></path></svg>
              <span class="block">Recommended Readings</span>
            </a>
          </li>
          <li>
            <a href="#" class="block p-3 bg-white dark:bg-gray-800 rounded-md shadow-sm hover:shadow-md transition-shadow font-sans text-base text-gray-900 dark:text-gray-100 flex items-center space-x-3 group">
              <svg class="w-5 h-5 text-red-600 dark:text-orange-500 group-hover:text-red-700 dark:group-hover:text-orange-600" 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 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
              <span class="block">Lecture Slides</span>
            </a>
          </li>
          <li>
            <a href="#" class="block p-3 bg-white dark:bg-gray-800 rounded-md shadow-sm hover:shadow-md transition-shadow font-sans text-base text-gray-900 dark:text-gray-100 flex items-center space-x-3 group">
              <svg class="w-5 h-5 text-red-600 dark:text-orange-500 group-hover:text-red-700 dark:group-hover:text-orange-600" 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 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
              <span class="block">Video Archive</span>
            </a>
          </li>
          <li>
            <a href="#" class="block p-3 bg-white dark:bg-gray-800 rounded-md shadow-sm hover:shadow-md transition-shadow font-sans text-base text-gray-900 dark:text-gray-100 flex items-center space-x-3 group">
              <svg class="w-5 h-5 text-red-600 dark:text-orange-500 group-hover:text-red-700 dark:group-hover:text-orange-600" 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="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="block">Discussion Forums</span>
            </a>
          </li>
        </ul>

        <div class="mt-6">
          <h3 class="text-xl font-serif text-red-800 dark:text-orange-400 mb-3">Upcoming Deadlines</h3>
          <ul class="space-y-3">
            <li class="flex items-center space-x-3 text-sm font-sans text-gray-700 dark:text-gray-300">
              <input type="checkbox" id="assignment1" class="form-checkbox text-red-600 dark:text-orange-500 ring-2 ring-red-300 dark:ring-orange-400 w-4 h-4 rounded-sm">
              <label for="assignment1" class="flex-1">Essay 1: Nile Civilizations <span class="font-medium text-red-700 dark:text-orange-600 ml-1">Oct 20</span></label>
            </li>
            <li class="flex items-center space-x-3 text-sm font-sans text-gray-700 dark:text-gray-300">
              <input type="checkbox" id="quiz1" class="form-checkbox text-red-600 dark:text-orange-500 ring-2 ring-red-300 dark:ring-orange-400 w-4 h-4 rounded-sm">
              <label for="quiz1" class="flex-1">Quiz 1: Mesopotamia <span class="font-medium text-red-700 dark:text-orange-600 ml-1">Oct 25</span></label>
            </li>
             <li class="flex items-center space-x-3 text-sm font-sans text-gray-700 dark:text-gray-300">
              <input type="checkbox" id="project1" class="form-checkbox text-red-600 dark:text-orange-500 ring-2 ring-red-300 dark:ring-orange-400 w-4 h-4 rounded-sm">
              <label for="project1" class="flex-1">Group Project: Greece <span class="font-medium text-red-700 dark:text-orange-600 ml-1">Nov 10</span></label>
            </li>
          </ul>
        </div>
      </aside>
    </div>

    <!-- Footer - like the bottom of a page -->
    <div class="relative p-4 sm:p-6 bg-amber-200 dark:bg-gray-900 border-t-2 border-amber-300 dark:border-gray-700 text-center text-gray-600 dark:text-gray-400 text-sm font-sans flex justify-between items-center">
      <p>&copy; 2023 Ancient Studies Dept.</p>
      <button class="px-5 py-2 bg-orange-700 hover:bg-orange-800 dark:bg-orange-800 dark:hover:bg-orange-900 text-white rounded-lg font-bold shadow-lg transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500">
        Enroll Now
      </button>
    </div>
  </div>
</div>

Organic_Nature_Modal_Documentation

アースカラーを使用した有機的/自然にインスパイアされたデザインのシンプルで応答性の高いモーダルコンポーネントで、ドキュメントやwikiサイトに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-stone-900/50 dark:bg-black/70 backdrop-blur-sm">
  <div class="relative w-full max-w-lg mx-auto overflow-hidden rounded-3xl shadow-xl bg-gradient-to-br from-amber-50 dark:from-stone-800 to-lime-50 dark:to-stone-900 ring-1 ring-lime-200 dark:ring-stone-700 transform transition-all duration-300 ease-out sm:rounded-4xl md:rounded-5xl lg:rounded-6xl">
    <div class="p-6 sm:p-8 md:p-10 lg:p-12">
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-2xl font-semibold text-lime-800 dark:text-lime-300 sm:text-3xl font-serif leading-tight">Understanding Ecosystems</h2>
        <button aria-label="Close modal" class="text-stone-500 hover:text-red-600 dark:text-stone-400 dark:hover:text-red-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-lime-500 dark:focus:ring-stone-600 rounded-full p-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <div class="prose prose-lime dark:prose-invert max-w-none text-stone-700 dark:text-stone-300">
        <p class="mb-4 leading-relaxed">An ecosystem is a community of living organisms (biotic components) interacting with their non-living physical environment (abiotic components). These interactions involve the flow of energy and the cycling of nutrients, creating a self-sustaining system.</p>
        <p class="mb-4 leading-relaxed">Key elements include producers (plants), consumers (animals), and decomposers (bacteria and fungi). Each plays a vital role in maintaining the delicate balance of life.</p>
        <figure class="my-6 rounded-xl overflow-hidden shadow-md ring-1 ring-lime-200 dark:ring-stone-700">
          <img src="https://picsum.photos/600/350?random=1" alt="Lush green forest ecosystem" class="w-full h-auto object-cover">
          <figcaption class="text-center text-sm p-2 bg-lime-100 dark:bg-stone-700 text-lime-700 dark:text-stone-300">A flourishing forest ecosystem demonstrating biodiversity.</figcaption>
        </figure>
        <h3 class="text-xl font-medium text-lime-700 dark:text-lime-400 mb-2 font-serif">Types of Ecosystems</h3>
        <ul class="list-disc list-inside space-y-1">
          <li><strong>Terrestrial:</strong> Forests, grasslands, deserts, tundras.</li>
          <li><strong>Aquatic:</strong> Freshwater (rivers, lakes) and marine (oceans, coral reefs).</li>
        </ul>
        <p class="mt-4 leading-relaxed">Understanding these intricate systems helps us appreciate the natural world and develop strategies for conservation.</p>
      </div>
    </div>

    <div class="flex justify-end p-6 pt-0 sm:p-8 sm:pt-0 md:p-10 md:pt-0 lg:p-12 lg:pt-0 border-t border-t-lime-200 dark:border-t-stone-700">
      <button class="px-6 py-3 rounded-full text-sm font-medium text-white bg-lime-700 hover:bg-lime-800 dark:bg-lime-600 dark:hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-offset-2 transition-colors duration-200 shadow-md transform hover:scale-105 active:scale-95">
        Got It
      </button>
    </div>
  </div>
</div>