소셜 구성 요소 구성 요소
어두운 모드에서 단색 색 구성표로 설계된 포트폴리오 구성 요소입니다. 단순한 레이아웃으로 작품이나 제품을 선보입니다.
HTML 코드
<div class="bg-gray-900 text-gray-100 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-bold mb-4">My Portfolio</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-800 p-4 rounded-lg shadow">
<img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=1" alt="Project 1" />
<h3 class="text-xl font-semibold mt-2">Project Title 1</h3>
<p class="text-gray-400">Short description of the project goes here.</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow">
<img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=2" alt="Project 2" />
<h3 class="text-xl font-semibold mt-2">Project Title 2</h3>
<p class="text-gray-400">Short description of the project goes here.</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow">
<img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=3" alt="Project 3" />
<h3 class="text-xl font-semibold mt-2">Project Title 3</h3>
<p class="text-gray-400">Short description of the project goes here.</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow">
<img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=4" alt="Project 4" />
<h3 class="text-xl font-semibold mt-2">Project Title 4</h3>
<p class="text-gray-400">Short description of the project goes here.</p>
</div>
</div>
<hr class="my-6 border-gray-700" />
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="h-10 w-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar" />
<div>
<h4 class="text-lg font-semibold">Your Name</h4>
<p class="text-gray-400">Your Title or Profession</p>
</div>
</div>
<a href="#" class="bg-blue-600 text-gray-100 py-2 px-4 rounded hover:bg-blue-700 transition duration-300">Contact Me</a>
</div>
</div>