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 コンポーネント

マテリアル デザインのスタイル設定とダーク テーマのサポートを備えたレスポンシブ マップ コンポーネントで、Tailwind CSS を使用して構築されています。

開ける

Cyberpunk_Gaming_Maps_Component

ダークな背景、ネオンのアクセント、類似の配色を特徴とする、シンプルでレスポンシブなサイバーパンクをテーマにしたゲームインターフェースのマップコンポーネントです。ダークモードのサポートが含まれています。

開ける

Maps コンポーネント

教育プラットフォーム向けに設計されたレスポンシブマップのようなコンポーネントで、インタラクティブな要素とソフトなパステルカラー、ダークモードをサポートしています。微妙なホバリングやアクティブ状態などのマイクロインタラクションに焦点を当てています。

開ける