Components Price Display Price Display Component

Price Display Component

A 3D styled price display component that supports dark mode and responsive effects, showcasing product price details.

Preview

HTML Code

<div class="max-w-sm mx-auto p-5 bg-white rounded-lg shadow-lg dark:bg-gray-800 transition-transform transform hover:scale-105">
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/200" alt="Product Image" class="w-full h-48 object-cover rounded-md shadow-md mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Name</h2>
        <p class="text-lg text-gray-600 dark:text-gray-300 mb-4">A brief description of the product goes here, highlighting features and benefits.</p>
        <div class="flex flex-row items-baseline mb-4">
            <span class="text-2xl font-bold text-gray-800 dark:text-white">$49.99</span>
            <span class="text-sm text-gray-500 dark:text-gray-400 ml-2">/ month</span>
        </div>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <span class="text-sm text-gray-600 dark:text-gray-400">5 reviews</span>
        </div>
        <button class="mt-4 py-2 px-4 bg-blue-500 text-white rounded-md shadow-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-200">Buy Now</button>
    </div>
</div>

Related Components

Neumorphic Price Display Component

A complex, responsive, and dark-mode-compatible price display component with a Neumorphism design style and an analogous color scheme, suitable for blog/content consumption. Features multiple interactive elements like toggles and detailed tiers.

Open

Price Display Component

A 3D-inspired Price Display Component with a monochromatic color scheme, designed for social media interfaces. It's a complex, responsive component with dark mode support, built using Tailwind CSS. No JavaScript is included.

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