3D カード コンポーネント
ダッシュボードに適した、3Dデザインスタイル、鮮やかな色、複数のインタラクティブ要素を備えたレスポンシブカードコンポーネント。Tailwindのダークプレフィックスを使用したダークモードをサポートします。
HTMLコード
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
<div class="relative">
<img src="https://picsum.photos/400/200" alt="Card image" class="rounded-t-lg w-full">
<div class="absolute top-2 left-2 bg-red-600 text-white py-1 px-2 rounded-md">New</div>
</div>
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a description of the card content. It provides insight into the purpose of this card.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-700 dark:text-gray-300">John Doe</span>
</div>
</div>
<div class="px-4 py-2 border-t dark:border-gray-700">
<button class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none">Action</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
<div class="relative">
<img src="https://picsum.photos/400/201" alt="Card image" class="rounded-t-lg w-full">
<div class="absolute top-2 left-2 bg-green-600 text-white py-1 px-2 rounded-md">Featured</div>
</div>
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Insightful content about the card, detailing its functionalities and offerings.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-700 dark:text-gray-300">Jane Smith</span>
</div>
</div>
<div class="px-4 py-2 border-t dark:border-gray-700">
<button class="bg-orange-600 text-white py-2 px-4 rounded-md hover:bg-orange-700 focus:outline-none">Explore</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
<div class="relative">
<img src="https://picsum.photos/400/202" alt="Card image" class="rounded-t-lg w-full">
<div class="absolute top-2 left-2 bg-blue-600 text-white py-1 px-2 rounded-md">Popular</div>
</div>
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Information and interactive elements that are engaging and useful.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-700 dark:text-gray-300">Mark Johnson</span>
</div>
</div>
<div class="px-4 py-2 border-t dark:border-gray-700">
<button class="bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 focus:outline-none">Learn More</button>
</div>
</div>
</div>関連コンポーネント
カードコンポーネント
ブルータリズムのデザインスタイルを採用したレスポンシブポートフォリオカードコンポーネントで、パステルカラーの配色と適度な複雑さ、インタラクティブ機能を活用しています。このカードは、作品や製品を紹介し、ダークモードをサポートします。
マテリアルデザインカード
レスポンシブ動作と Tailwind CSS を使用したダーク モードのサポートを備えたマテリアル デザイン スタイルのカード コンポーネント。標高と波紋の効果、視覚的な手がかりが特徴です。
ニューモーフィックカードコンポーネント
Neumorphism スタイルでデザインされたレスポンシブ カード コンポーネントで、ダーク テーマをサポートし、微妙なシャドウと柔軟なレイアウトが特徴です。