E-commerce Components 구성 요소
블로그를 위한 브루탈리즘 전자 상거래 구성 요소로, 생생한 색 구성표와 적당한 복잡성을 특징으로 합니다. 여기에는 Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 디자인이 포함되어 있습니다.
HTML 코드
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex flex-col items-center justify-center font-mono">
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 mb-8 max-w-sm w-full shadow-[8px_8px_0_black] dark:shadow-[8px_8px_0_white]">
<img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover border-4 border-black dark:border-white mb-4">
<h3 class="text-2xl font-bold text-black dark:text-white mb-2">Disruptor X1</h3>
<p class="text-black dark:text-white mb-4">Unleash the power of raw computing. This machine doesn't just run; it detonates.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-3xl font-bold text-red-600 dark:text-red-400">$999.99</span>
<button class="bg-yellow-400 text-black dark:bg-yellow-600 dark:text-white border-4 border-black dark:border-white px-6 py-3 font-bold text-lg hover:bg-yellow-500 dark:hover:bg-yellow-700 transition duration-300">BUY NOW</button>
</div>
</div>
<!-- Another Product Card -->
<div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 mb-8 max-w-sm w-full shadow-[8px_8px_0_black] dark:shadow-[8px_8px_0_white]">
<img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="w-full h-48 object-cover border-4 border-black dark:border-white mb-4">
<h3 class="text-2xl font-bold text-black dark:text-white mb-2">Axiom Z2</h3>
<p class="text-black dark:text-white mb-4">Experience sound like never before. Pure, unadulterated audio assault.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-3xl font-bold text-green-600 dark:text-green-400">$249.99</span>
<button class="bg-yellow-400 text-black dark:bg-yellow-600 dark:text-white border-4 border-black dark:border-white px-6 py-3 font-bold text-lg hover:bg-yellow-500 dark:hover:bg-yellow-700 transition duration-300">GRAB IT</button>
</div>
</div>
<!-- Blog Post Snippet (acting as related content/upsell) -->
<div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 max-w-lg w-full shadow-[8px_8px_0_black] dark:shadow-[8px_8px_0_white]">
<h4 class="text-xl font-bold text-black dark:text-white mb-3">READ: The Philosophy of Brutalist Tech</h4>
<img src="https://picsum.photos/400/200?random=3" alt="Blog Post Image" class="w-full h-32 object-cover border-4 border-black dark:border-white mb-4">
<p class="text-black dark:text-white text-sm mb-4">Dive deep into the design principles that make our products unapologetically bold and functional.</p>
<a href="#" class="text-blue-700 dark:text-blue-300 underline font-bold hover:text-blue-900 dark:hover:text-blue-500">Continue Reading →</a>
<div class="mt-6 pt-4 border-t-2 border-black dark:border-white flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-12 h-12 rounded-full border-2 border-black dark:border-white mr-4">
<div>
<p class="font-bold text-black dark:text-white">J.D. Brutal</p>
<p class="text-sm text-gray-700 dark:text-gray-300">Tech Alchemist</p>
</div>
</div>
</div>
<!-- Responsive Adjustments -->
<div class="mt-8 text-center text-gray-700 dark:text-gray-300 text-sm">
<p>Resize your browser to see responsiveness!</p>
<p>Dark mode toggles automatically based on system preference.</p>
</div>
</div>