レトロヴィンテージモーダルコンポーネント
Tailwind CSSでデザインされたレスポンシブなレトロ/ビンテージモーダルコンポーネントで、ダークモードのサポートとノスタルジックな80年代/90年代の美学が含まれています。
HTMLコード
<div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-75 transition-opacity" id="modal-wrapper">
<div class="bg-white rounded-lg shadow-lg max-w-md w-full p-6 sm:p-8">
<div class="flex justify-between items-center">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-300">Retro Modal Title</h2>
<button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200 focus:outline-none" id="modal-close">
×
</button>
</div>
<div class="mt-4">
<img src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" class="w-full h-auto rounded-md">
<p class="mt-2 text-gray-600 dark:text-gray-400">This is a nostalgic modal component inspired by the vintage aesthetics of the 80s and 90s. It features a simple layout and dark mode support.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-700 dark:text-gray-300">John Doe</span>
</div>
</div>
<div class="mt-6 flex justify-end">
<button class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Action</button>
</div>
</div>
</div>
<!-- Dark Mode Styles -->
<style>
@media (prefers-color-scheme: dark) {
#modal-wrapper {
background-color: rgba(31, 41, 55, 0.75);
}
}
</style>
関連コンポーネント
モーダルコンポーネント
黒、白、アクセントの配色を備えた複雑で応答性の高いモーダルコンポーネントで、製造/産業アプリケーションに適したグラデーショントランジションが特徴です。ダークモードのサポートが含まれています。
モーダルコンポーネント
マイクロインタラクションとトライアドカラースキームでスタイリングされたレスポンシブモーダルコンポーネントで、ソーシャルメディアインターフェース用に設計されています。インタラクション時にユーザーを引き付けるアニメーションが特徴で、Tailwind CSSを使用してダークテーマをサポートします。
Art_Deco_Government_Modal
アールデコ調のレスポンシブなモーダルコンポーネントで、幾何学模様、豪華なスタイリング、類似の配色を特徴とする、政府および公共サービスのWebサイト向けです。ダークモードのサポートが含まれています。