장바구니에 추가 버튼
Tailwind CSS로 디자인된 스큐어모픽 '장바구니에 담기' 버튼 컴포넌트로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다.
HTML 코드
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 flex items-center space-x-4 transition-transform transform hover:scale-105">
<img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-lg shadow">
<div class="flex-1">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Product Name</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
</div>
<button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:bg-blue-400 transition duration-200">
Add to Cart
</button>
</div>
</div>
관련 구성 요소
Glassmorphism 장바구니에 추가 버튼
Add to Cart Button with Glassmorphism 스타일, 단색 색 구성표 및 중간 정도의 복잡성. 다크 모드 지원으로 반응형.
Add to Cart Button 컴포넌트
Tailwind CSS가 포함된 잔인함에서 영감을 받은 장바구니에 담기 버튼 구성 요소는 고대비, 특이한 레이아웃, 반응형 효과 및 어두운 테마 지원을 특징으로 합니다.
Add to Cart Button 컴포넌트
Tailwind CSS를 사용하여 생생한 색상, 반응형 디자인 및 어두운 테마를 지원하는 3D 스타일의 장바구니에 추가 버튼 구성 요소입니다.