インタラクティブコンポーネントコンポーネント
ブルータリズムスタイルでデザインされたインタラクティブコンポーネントで、ダークテーマをサポートする作品や製品の展示に適しています。
HTMLコード
<div class="bg-gray-800 text-white p-8 rounded-lg shadow-lg"> <h1 class="text-3xl font-bold mb-6">My Portfolio</h1> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-gray-700 p-4 rounded-lg"> <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Project 1"> <h2 class="text-xl font-semibold mt-2">Project Title 1</h2> <p class="text-gray-300">A short description of the project with high contrast and bold layout.</p> <div class="mt-4 flex justify-between items-center"> <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"> <a href="#" class="text-blue-400 hover:underline">View More</a> </div> </div> <div class="bg-gray-700 p-4 rounded-lg"> <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Project 2"> <h2 class="text-xl font-semibold mt-2">Project Title 2</h2> <p class="text-gray-300">A short description of the project with high contrast and bold layout.</p> <div class="mt-4 flex justify-between items-center"> <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar"> <a href="#" class="text-blue-400 hover:underline">View More</a> </div> </div> <div class="bg-gray-700 p-4 rounded-lg"> <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=3" alt="Project 3"> <h2 class="text-xl font-semibold mt-2">Project Title 3</h2> <p class="text-gray-300">A short description of the project with high contrast and bold layout.</p> <div class="mt-4 flex justify-between items-center"> <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar"> <a href="#" class="text-blue-400 hover:underline">View More</a> </div> </div> </div> <div class="mt-8 text-center"> <button class="bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-500">Load More Projects</button> </div></div>関連コンポーネント
ブルータリスト製品カード
eコマース用のシンプルなインタラクティブ製品カードコンポーネントで、グレースケールのブルータリズムデザインが施されています。商品画像、タイトル、価格、「カートに入れる」ボタンが特徴です。このコンポーネントは応答性が高く、ダークモードをサポートしています。ホバー効果は、対話性のために含まれています。
インタラクティブコンポーネントコンポーネント
Skeuomorphismデザイン、類似の配色、およびブログ/コンテンツの目的のための適度な複雑さを備えたインタラクティブコンポーネントコンポーネント。ダークテーマをサポートするレスポンシブデザイン。JavaScript コードはありません。