Price Display Component 22
A minimalist price display component that showcases a product's image, name, price, and a button to add to the cart. Designed with responsiveness and dark theme support using Tailwind CSS.
HTML Code
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Product Image">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h2>
<p class="text-xl text-gray-600 dark:text-gray-300">$29.99</p>
<button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300" type="button">Add to Cart</button>
</div>
</div>Related Components
Price Display Component
A retro-vintage style complex price display component for portfolios, featuring a triadic color scheme, responsiveness, and dark mode support using Tailwind CSS. No JavaScript is included.
Cyberpunk Price Display Component
A responsive price display component for consulting/services with a cyberpunk, futuristic neon aesthetic. Features dark backgrounds, bright analogous accent colors, and supports dark mode.
Price Display Component
A responsive Price Display Component with Neumorphism style and complementary color scheme, designed for blog content with dark mode support.