コンポーネント 資本 レトロヴィンテージモーダルコンポーネント

レトロヴィンテージモーダルコンポーネント

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">
                &times;
            </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サイト向けです。ダークモードのサポートが含まれています。

開ける