Add to Cart Button 컴포넌트
장바구니에 추가 버튼: 어스 톤, 색상 구성표 및 복잡한 복잡성 수준이 있는 다크 모드 UI용으로 설계된 포트폴리오 목적입니다. 이 구성 요소는 반응형이며 Tailwind의 dark: 접두사를 사용하여 어두운 테마를 지원합니다.
HTML 코드
<button class="bg-stone-700 hover:bg-stone-600 text-stone-100 py-3 px-6 rounded-lg font-semibold text-lg shadow-lg transition duration-300 ease-in-out dark:bg-stone-800 dark:hover:bg-stone-700 dark:text-stone-200 dark:shadow-xl"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-4-4H8a4 4 0 00-4 4v4m11 0l-3 4m0 0h3v3zm-3-4v1m10-4v2a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h10a2 2 0 012 2z" /> </svg> Add to Cart </button>관련 구성 요소
Add to Cart Button 컴포넌트
헬스케어/의료 애플리케이션을 위한 복잡한 '장바구니에 담기' 버튼 구성 요소로, 스위스/인터내셔널 타이포그래피와 어스 톤에서 영감을 받았습니다. 타이포그래피와 그리드 시스템에 중점을 둔 깔끔하고 미니멀한 디자인이 특징이며, 완전한 응답성과 다크 모드 지원을 제공합니다.