CCHub Logo CCHub Tailwind Collection
コンポーネント 資本 マテリアルデザインモーダル

マテリアルデザインモーダル

レスポンシブデザインとダークテーマをサポートするマテリアルデザインスタイルのモーダルコンポーネント。モーダルオーバーレイ、カードのような外観のモーダルコンテナ、閉じるボタンが含まれています。JavaScriptは含まれていません。

プレビュー

HTMLコード 

<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
    <div class="mt-3 text-center">
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Modal Title</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-300">Modal content goes here. This is a placeholder for your information.</p>
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">Got It!</button>
      </div>
    </div>
  </div>
</div>

関連コンポーネント

Healthcare_Medical_Modal_Component

ヘルスケア/医療アプリケーション向けの複雑で応答性の高いモーダルコンポーネントで、サンセット/ウォームカラースキームのマテリアルデザインに触発されています。フォーム要素、画像、およびダークモードのサポートが含まれています。

開ける

GlassmorphismModalコンポーネント

類似の配色、適度な複雑さ、ブログ/コンテンツの表示に適した Glassmorphism スタイルのモーダル コンポーネント。Tailwind CSSを使用したダークテーマをサポートするレスポンシブデザインが特徴です。

開ける

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

Tailwind CSSでデザインされたレスポンシブなレトロ/ビンテージモーダルコンポーネントで、ダークモードのサポートとノスタルジックな80年代/90年代の美学が含まれています。

開ける