CCHub Logo CCHub Tailwind Collection
コンポーネント マップ Retro Maps コンポーネント

Retro Maps コンポーネント

レトロ/ビンテージの美学、鮮やかな配色、ビジネス/企業目的を備えた、シンプルでレスポンシブなダークモード互換のマップコンポーネントで、Tailwind CSSで構築されています。

プレビュー

HTMLコード 

<section class="bg-gray-100 dark:bg-gray-900 py-12">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Our Location</h2>
    <div class="relative">
      <img src="https://picsum.photos/seed/maps/800/400" alt="Map of our location" class="w-full h-96 object-cover rounded-lg shadow-lg">
      <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-50 rounded-lg"></div>
      <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
        <h3 class="text-2xl font-semibold mb-2">Find Us Here</h3>
        <p class="text-gray-300">123 Main Street, Anytown, USA</p>
      </div>
    </div>
  </div>
</section>

関連コンポーネント

MemphisMapsComponent_CryptoBlockchain

複雑で応答性の高い「メンフィスデザイン」にインスパイアされた暗号通貨/ブロックチェーンアプリケーション用のマップコンポーネントで、大胆な色、幾何学的な形、温かみのある夕焼けの配色が特徴です。ダークモードのサポートとインタラクティブな要素が含まれています。

開ける

ゲームのための遊び心のあるマップコンポーネント

ゲームWebサイトに適したシンプルで遊び心のあるレスポンシブマップコンポーネントで、明るい宝石の色調、丸みを帯びた要素、ダークモードのサポートが特徴です。

開ける

Brutalism_Photography_Maps_Component

写真ポートフォリオ用のシンプルなブルータリズムスタイルのマップコンポーネントで、大胆な紫色の配色とハイコントラスト、ダークモードのサポートが特徴です。

開ける