ギャラリー コンポーネント
マテリアルデザインでデザインされたレスポンシブギャラリーコンポーネントで、ダッシュボードの目的で類似の配色が施されています。
HTMLコード
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Gallery</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Image Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description for image 1.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Image Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description for image 2.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Image Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description for image 3.</p>
</div>
</div>
<!-- Repeat more images as needed -->
</div>
<div class="mt-6">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">User Avatars</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full w-16 h-16">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar 1" class="rounded-full">
</div>
<div class="flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full w-16 h-16">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar 2" class="rounded-full">
</div>
<div class="flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full w-16 h-16">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar 3" class="rounded-full">
</div>
<div class="flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full w-16 h-16">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar 4" class="rounded-full">
</div>
<!-- Repeat more avatars as needed -->
</div>
</div>
</div>関連コンポーネント
レトロギャラリーコンポーネント
レトロ/ビンテージスタイル、鮮やかな配色、ブログ/コンテンツ消費用のシンプルなレイアウトを備えたレスポンシブギャラリーコンポーネントで、ダークモードがサポートされています。Tailwind CSSを使用します。
ギャラリー コンポーネント
鮮やかな配色、適度な複雑さ、ダークテーマをサポートするレスポンシブデザインを備えたレトロ/ビンテージ風のギャラリーコンポーネント。コンテンツ消費用に設計されています。
スキューモーフィック暗号ギャラリー
暗号通貨およびブロックチェーンアプリケーション用に設計された複雑なスキューモーフィックギャラリーコンポーネントで、補色、応答性、およびダークモードのサポートを特長としています。埋め込み式ボタンやエンボス加工されたフレームなど、現実世界の要素を模倣しています。