列コンポーネント
ダークモードをサポートするポートフォリオ展示用に設計されたレスポンシブカラムコンポーネントで、グレースケールの配色とTailwind CSSを使用しています。
HTMLコード
<div class="container mx-auto px-4 py-8">
<h2 class="text-3xl font-bold text-white text-center mb-8">Portfolio Showcase</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="w-full h-40 object-cover rounded-t-lg">
<h3 class="text-xl font-semibold text-white mt-4">Project Title 1</h3>
<p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
<span class="ml-2 text-gray-300">John Doe</span>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="w-full h-40 object-cover rounded-t-lg">
<h3 class="text-xl font-semibold text-white mt-4">Project Title 2</h3>
<p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
<span class="ml-2 text-gray-300">Jane Smith</span>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="w-full h-40 object-cover rounded-t-lg">
<h3 class="text-xl font-semibold text-white mt-4">Project Title 3</h3>
<p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
<span class="ml-2 text-gray-300">Alice Johnson</span>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/300?random=4" alt="Project 4" class="w-full h-40 object-cover rounded-t-lg">
<h3 class="text-xl font-semibold text-white mt-4">Project Title 4</h3>
<p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
<span class="ml-2 text-gray-300">Mark Brown</span>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/300?random=5" alt="Project 5" class="w-full h-40 object-cover rounded-t-lg">
<h3 class="text-xl font-semibold text-white mt-4">Project Title 5</h3>
<p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
<span class="ml-2 text-gray-300">Emma Williams</span>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/300?random=6" alt="Project 6" class="w-full h-40 object-cover rounded-t-lg">
<h3 class="text-xl font-semibold text-white mt-4">Project Title 6</h3>
<p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
<span class="ml-2 text-gray-300">Oliver Davis</span>
</div>
</div>
</div>
</div>関連コンポーネント
列コンポーネント
Glassmorphismで設計されたレスポンシブカラムコンポーネントで、ビジネス/企業Webサイトにトライアドカラースキームを使用しています。すりガラスのような半透明の要素、ぼかし効果が特徴で、ダークモードに適しています。
列コンポーネント
ダッシュボードの列コンポーネントで、補色の 3D デザインが特徴です。シンプルなレイアウト、ダークモードのサポート、スタイル設定にTailwind CSSを使用する3つのレスポンシブカラムが含まれています。JavaScriptは含まれていません。
列コンポーネントニューモーフィズム
Columns Component Neumorphism - 微妙な影を使用して背景から押し出されたように見える要素を作成するソフトな UI スタイルです。このコンポーネントはレスポンシブで、ダークテーマをサポートしています。JavaScript コードは必要ありません。ダークモードの場合、CSSのサポートで十分です。