Industrial_Sepia_Medical_Modal
セピア/ブラウンの色調を使用し、ヘルスケア/医療用途向けに設計された、工業的な原材料の美学を備えたシンプルで応答性の高いモーダルコンポーネントで、ダークモードがサポートされています。
HTMLコード
<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>関連コンポーネント
マイクロインタラクションを持つ複雑な素朴なビジネスモーダル
複雑で応答性の高いアースカラーのモーダルコンポーネントで、マイクロインタラクションがあり、ビジネスWebサイトに適しており、ダークモードをサポートします。