HTMLコード
<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg transform transition-transform hover:scale-105 duration-300">
<div class="dark:text-white">
<h2 class="text-xl font-bold mb-4">File Viewer</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition-transform hover:scale-105 duration-300">
<img src="https://picsum.photos/400/300" alt="File thumbnail" class="w-full h-32 object-cover mb-2 rounded">
<h3 class="font-semibold text-gray-800 dark:text-white">Document.pdf</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">1.2 MB</p>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition-transform hover:scale-105 duration-300">
<img src="https://picsum.photos/400/300" alt="File thumbnail" class="w-full h-32 object-cover mb-2 rounded">
<h3 class="font-semibold text-gray-800 dark:text-white">Image.jpg</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">800 KB</p>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition-transform hover:scale-105 duration-300">
<img src="https://picsum.photos/400/300" alt="File thumbnail" class="w-full h-32 object-cover mb-2 rounded">
<h3 class="font-semibold text-gray-800 dark:text-white">Video.mp4</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">15 MB</p>
</div>
</div>
</div>
</div>関連コンポーネント
ファイルビューアコンポーネント1
Tailwind CSSを使用して設計されたミニマリストのファイルビューアコンポーネントで、レスポンシブエフェクトとダークテーマのサポートが特徴です。画像やユーザーアバターのプレースホルダーなど、クリーンなレイアウトでファイルを表示します。
ファイルビューアコンポーネント
Tailwind CSS を使用したマテリアル デザインの原則でスタイル設定されたレスポンシブ ファイル ビューア コンポーネントで、ダーク テーマがサポートされています。