Add to Cart Button 컴포넌트
레트로/빈티지 미학과 보색으로 디자인된 복잡한 장바구니에 담기 버튼은 전문 회사 웹사이트에 적합합니다. 이 구성 요소는 다크 모드를 지원하며 스타일링에 Tailwind CSS를 활용하여 반응형입니다.
HTML 코드
<div class="flex items-center justify-center p-5 bg-gradient-to-r from-pink-500 to-yellow-500 rounded-lg transition duration-300 ease-in-out hover:scale-105 dark:from-pink-800 dark:to-yellow-700"> <img src="https://picsum.photos/40/40" alt="Product Image" class="rounded"> <div class="ml-4"> <h2 class="text-lg font-bold text-gray-900 dark:text-gray-100">Product Title</h2> <p class="text-sm text-gray-700 dark:text-gray-300">This is a brief description of the product.</p> </div> <button class="ml-auto bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Add to Cart</button> <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="ml-4 h-10 w-10 rounded-full border-2 border-blue-500 dark:border-blue-700"> </div>관련 구성 요소
Luxury_Retro_Add_to_Cart_Button
럭셔리/프리미엄 느낌과 레트로/빈티지 색상 팔레트가 있는 우아한 '장바구니에 담기'(또는 부동산의 경우 '지금 문의하기') 버튼 구성 요소입니다. 부동산 플랫폼용으로 설계되었으며 반응형 디자인과 다크 모드를 지원합니다.