Buttons 구성 요소
포트폴리오를 위한 그레이스케일 색 구성표의 Material Design 스타일 버튼으로, 어두운 테마를 지원하는 반응형 디자인이 특징입니다.
HTML 코드
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
<h1 class="mb-8 text-3xl font-bold text-gray-800 dark:text-gray-200">Portfolio Showcase</h1>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
<div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/300/200" alt="Project 1" class="w-full h-48 object-cover rounded-md mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project 1</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Description of project 1 goes here.</p>
<a href="#" class="inline-block px-6 py-2 text-sm font-medium text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Details</a>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/300/201" alt="Project 2" class="w-full h-48 object-cover rounded-md mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project 2</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Description of project 2 goes here.</p>
<a href="#" class="inline-block px-6 py-2 text-sm font-medium text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Details</a>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/300/202" alt="Project 3" class="w-full h-48 object-cover rounded-md mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project 3</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Description of project 3 goes here.</p>
<a href="#" class="inline-block px-6 py-2 text-sm font-medium text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Details</a>
</div>
</div>
</div>관련 구성 요소
뉴모피즘 소셜 미디어 버튼
소셜 미디어 인터페이스를 위한 간단한 뉴모피즘(Neumorphism) 스타일의 버튼 컴포넌트로, Tailwind CSS를 사용하여 반응형 디자인과 다크 모드를 지원합니다. 이 버튼은 아날로그 색 구성표와 미묘한 그림자를 사용하여 부드럽고 돌출된 모양을 만듭니다.