장바구니에 추가 버튼
반응형 Add to Cart 버튼 구성 요소는 생생한 색상과 어두운 테마를 지원하여 소셜 미디어 인터페이스에 적합한 스큐어모픽 스타일로 설계되었습니다.
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 shadow-lg rounded-lg p-6 flex flex-col items-center relative overflow-hidden w-80">
<img class="rounded-md w-full mb-4 h-32 object-cover" src="https://picsum.photos/400/200" alt="Product Image" />
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Name</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the product. It tells you what you can expect from this item.</p>
<div class="flex items-center justify-between w-full mt-4">
<span class="text-lg font-bold text-green-500 dark:text-green-400">$49.99</span>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105">
Add to Cart
</button>
</div>
<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-800 dark:bg-gray-900 rounded-full w-16 h-16 shadow-lg flex items-center justify-center">
<img class="rounded-full w-12 h-12 border-2 border-white" src="https://randomuser.me/api/portraits/men/65.jpg" alt="User Avatar" />
</div>
</div>
</div>