Components Price Display Price Display Component

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.

Preview

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.

Open

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.

Open

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.

Open