ギャラリー コンポーネント
マテリアルデザインスタイルのTailwind CSSを使用したレスポンシブギャラリーコンポーネントで、ダークテーマをサポートするダッシュボードに適しています。
HTMLコード
<div class="container mx-auto p-6">
<h2 class="text-3xl font-bold text-center text-gray-900 dark:text-gray-100 mb-6">Gallery Component</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/300" alt="Image 1" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 1</h3>
<p class="text-gray-600 dark:text-gray-300">Description of image 1.</p>
</div>
<!-- Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/301" alt="Image 2" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 2</h3>
<p class="text-gray-600 dark:text-gray-300">Description of image 2.</p>
</div>
<!-- Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/302" alt="Image 3" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 3</h3>
<p class="text-gray-600 dark:text-gray-300">Description of image 3.</p>
</div>
<!-- Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/303" alt="Image 4" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 4</h3>
<p class="text-gray-600 dark:text-gray-300">Description of image 4.</p>
</div>
<!-- More cards -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/304" alt="Image 5" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 5</h3>
<p class="text-gray-600 dark:text-gray-300">Description of image 5.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/305" alt="Image 6" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 6</h3>
<p class="text-gray-600 dark:text-gray-300">Description of image 6.</p>
</div>
</div>
</div>関連コンポーネント
Event_Gallery_Component
イベントや会議の Web サイト向けのレスポンシブ ギャラリー コンポーネントで、ジュエル トーン、カラー グラデーション、スムーズなトランジション、ダーク モードのサポートが特徴です。イベントのハイライトやスピーカーの画像を視覚的に魅力的なグリッドで紹介します。
ブルータリストギャラリーコンポーネント
レスポンシブでブルータリズムにインスパイアされたエンターテインメントプラットフォーム向けのギャラリーコンポーネントで、ハイコントラストのクールなニュートラルとダークモードのサポートが特徴です。