Maps コンポーネント
Glassmorphism スタイルでデザインされたレスポンシブ Maps コンポーネントで、ダーク テーマと Tailwind CSS クラスが特徴です。データの視覚化とコントロールパネルを備えたダッシュボードに適しています。
HTMLコード
<div class="bg-white bg-opacity-20 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-50 rounded-lg p-6 shadow-lg overflow-hidden">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Dashboard</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white bg-opacity-40 backdrop-blur-md dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Map View</h3>
<img src="https://picsum.photos/600/300" alt="Map" class="rounded-lg w-full" />
</div>
<div class="bg-white bg-opacity-40 backdrop-blur-md dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">User Statistics</h3>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 mr-4" />
<div>
<p class="text-sm text-gray-600 dark:text-gray-300">John Doe</p>
<p class="text-xl font-semibold text-gray-800 dark:text-gray-200">150 Visits</p>
</div>
</div>
</div>
</div>
<div class="mt-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Map Controls</h3>
<div class="flex justify-between mt-2">
<button class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Zoom In</button>
<button class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800">Zoom Out</button>
</div>
</div>
</div>関連コンポーネント
Maps コンポーネント
Skeuomorphismデザイン、トライアドカラースキーム、適度な複雑さ、およびソーシャルメディアの目的を備えたマップコンポーネント。Tailwind CSSを使用したダークテーマをサポートするレスポンシブデザイン。
Brutalist Maps コンポーネント
Tailwind CSS を使用したモノクロカラーとダークモードをサポートする、ブルータリズムスタイルの複雑な e コマースマップコンポーネント。残忍なデザイン要素で製品の場所を表示します。