Price Display Component
A minimalist/flat design price display component for dashboard use, featuring responsive design and dark mode support.
HTML Code
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-xs mx-auto">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Price Overview</h2>
<div class="flex items-center justify-between mb-4">
<span class="text-lg font-semibold text-gray-700 dark:text-gray-300">Current Price</span>
<span class="text-2xl font-extrabold text-blue-500 dark:text-blue-300">$99.99</span>
</div>
<div class="flex items-center justify-between">
<img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-full">
<div>
<span class="text-sm text-gray-600 dark:text-gray-400">Last updated: 2 hours ago</span>
</div>
</div>
<button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-blue-600 dark:hover:bg-blue-500">View Details</button>
</div>
Related Components
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.
Price Display Component
Neumorphism styled Price Display Component featuring responsive effects and dark theme support.
Price Display Component
Price Display Component with responsive design, dark mode support, and vibrant color scheme.