Price Display Component
A complex price display component designed in skeuomorphic style mimicking real-world elements, suitable for blogs and content consumption with a triadic color scheme and responsive design with dark mode support.
HTML Code
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Price Display</h2>
<div class="flex items-center justify-between mb-4">
<img src="https://picsum.photos/80" alt="Product Image" class="w-20 h-20 rounded-full shadow-md border border-gray-300 dark:border-gray-600">
<div class="flex-shrink-0">
<span class="text-lg font-semibold text-gray-800 dark:text-white">$199.99</span>
<span class="text-sm text-gray-500 dark:text-gray-300">/ each</span>
</div>
</div>
<p class="text-gray-600 dark:text-gray-400 mb-6">This product is designed to give you the best experience and thus comes with an assurance of quality and excellent service.</p>
<div class="flex items-center justify-between border-t border-gray-200 dark:border-gray-600 pt-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded shadow-md">Buy Now</button>
<button class="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded shadow-md">Add to Cart</button>
</div>
<footer class="mt-4 text-gray-500 dark:text-gray-400 text-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mx-auto mb-1">
<span class="text-sm">Posted by John Doe</span>
</footer>
</div>
Related Components
Price Display Component
Neumorphism styled Price Display Component featuring responsive effects and dark theme support.
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.
Price Display Component
A Neumorphism-styled price display component with a complementary color scheme (soft orange and light blue), moderate complexity for e-commerce. It features a responsive design with dark theme support. The component displays a product image, title, and price with an 'Add to Cart' button. Dark mode uses desaturated complementary colors.