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

Maps コンポーネント

ソーシャルメディアインターフェイス用に設計されたWebコンポーネントで、グレースケールの配色を備えたブルータリズムデザインが特徴で、場所がマークされたマップを表示するのに適しています。

プレビュー

HTMLコード 

<div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg dark:bg-gray-800 max-w-2xl mx-auto">
  <h2 class="text-2xl font-bold mb-4">Maps Component</h2>
  <div class="relative mb-5">
    <img src="https://picsum.photos/600/400" alt="Map" class="w-full h-64 object-cover rounded-md mb-2">
    <div class="absolute left-4 top-4 bg-black bg-opacity-50 p-2 rounded">Location 1</div>
    <div class="absolute left-24 top-20 bg-black bg-opacity-50 p-2 rounded">Location 2</div>
    <div class="absolute left-10 top-36 bg-black bg-opacity-50 p-2 rounded">Location 3</div>
  </div>
  <div class="flex flex-col space-y-3">
    <h3 class="text-lg font-semibold">Locations</h3>
    <div class="flex items-center bg-gray-700 p-3 rounded shadow dark:bg-gray-600">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">User 1</p>
        <p class="text-sm">Location 1 Description</p>
      </div>
    </div>
    <div class="flex items-center bg-gray-700 p-3 rounded shadow dark:bg-gray-600">
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">User 2</p>
        <p class="text-sm">Location 2 Description</p>
      </div>
    </div>
    <div class="flex items-center bg-gray-700 p-3 rounded shadow dark:bg-gray-600">
      <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">User 3</p>
        <p class="text-sm">Location 3 Description</p>
      </div>
    </div>
  </div>
  <button class="mt-5 bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded dark:bg-gray-700 dark:hover:bg-gray-600">View More</button>
</div>

関連コンポーネント

Maps コンポーネント

スキューモーフィックスタイルでデザインされたレスポンシブマップコンポーネントで、柔らかなパステルカラーとソーシャルメディアネットワーキングに適したリッチなインターフェースが特徴です。このコンポーネントは、ライトモードとダークモードの両方をサポートし、複数のインタラクティブ要素が含まれています。

開ける

Retro Maps コンポーネント

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

開ける

Maps コンポーネント

ソーシャルメディア用の複雑で鮮やかなマップコンポーネントで、マイクロインタラクション、レスポンシブデザイン、Tailwind CSSを使用したダークモードのサポートを特徴としています。

開ける