Visualizzazione dei prezzi

Componente di visualizzazione del prezzo

Un componente di visualizzazione dei prezzi in stile neumorfismo con una combinazione di colori complementari (arancione tenue e azzurro), complessità moderata per l'e-commerce. Presenta un design reattivo con supporto per il tema scuro. Il componente mostra l'immagine del prodotto, il titolo e il prezzo con un pulsante "Aggiungi al carrello". La modalità scura utilizza colori complementari desaturati.

Apri anteprima

                <div class="p-8 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">

  <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-sm mx-auto transition-all duration-300">
    
    <!-- Product Image (Placeholder) -->
    <div class="w-full h-48 bg-gray-300 dark:bg-gray-700 rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark overflow-hidden">
      <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-full object-cover">
    </div>

    <!-- Product Title -->
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2 truncate">Neumorphic Product Title</h3>
    
    <!-- Product Description (Optional - Uncomment if needed) -->
    <!-- <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-2">This is a brief description of the product, showcasing its features and benefits.</p> -->

    <!-- Price and Add to Cart -->
    <div class="flex items-center justify-between mb-4">
      <span class="text-3xl font-bold text-orange-600 dark:text-orange-400">$129.99</span>
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-lg shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark active:shadow-inner-neumorphic-btn-light dark:active:shadow-inner-neumorphic-btn-dark transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        Add to Cart
      </button>
    </div>

    <!-- Additional Details (Optional) -->
    <div class="grid grid-cols-2 gap-3 text-sm text-gray-700 dark:text-gray-300">
      <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
        <p><strong class="text-gray-800 dark:text-gray-200">Category:</strong> Electronics</p>
      </div>
      <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
        <p><strong class="text-gray-800 dark:text-gray-200">Availability:</strong> In Stock</p>
      </div>
    </div>

  </div>

  <!-- TailwindCSS Config for Neumorphism Shadows (Add this to your tailwind.config.js) -->
  <div style="display: none;">
    <!-- You would typically add this to your tailwind.config.js file under 'extend' -->
    <pre>
      module.exports = {
        theme: {
          extend: {
            boxShadow: {
              'neumorphic-light': '9px 9px 18px #a1a1a1, -9px -9px 18px #ffffff',
              'neumorphic-dark': '9px 9px 18px #4a4a4a, -9px -9px 18px #1a1a1a',
              'inner-neumorphic-light': 'inset 5px 5px 10px #bdbdbd, inset -5px -5px 10px #ffffff',
              'inner-neumorphic-dark': 'inset 5px 5px 10px #333333, inset -5px -5px 10px #6d6d6d',
              'neumorphic-btn-light': '6px 6px 12px #9a9a9a, -6px -6px 12px #ffffff',
              'neumorphic-btn-dark': '6px 6px 12px #444444, -6px -6px 12px #222222',
              'inner-neumorphic-btn-light': 'inset 3px 3px 6px #8c8c8c, inset -3px -3px 6px #ffffff',
              'inner-neumorphic-btn-dark': 'inset 3px 3px 6px #3b3b3b, inset -3px -3px 6px #5f5f5f',
            }
          }
        }
      }
    </pre>
  </div>

</div>

Componente di visualizzazione del prezzo

Un componente complesso di visualizzazione dei prezzi in stile retrò-vintage per i portafogli, caratterizzato da una combinazione di colori triadica, reattività e supporto per la modalità oscura utilizzando Tailwind CSS. Non è incluso alcun JavaScript.

Apri anteprima

                <div class="bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center p-8">
  <div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 rounded-lg shadow-lg p-8 max-w-sm w-full transform transition-all duration-500 hover:scale-105">
    <div class="text-center mb-8">
      <h2 class="text-3xl font-bold font-mono mb-2 text-teal-600 dark:text-teal-400">Pro Plan</h2>
      <p class="text-gray-600 dark:text-gray-400">Level up your portfolio</p>
    </div>
    <div class="text-center mb-8">
      <p class="text-5xl font-extrabold mb-2 text-purple-600 dark:text-purple-400">$29<span class="text-xl font-medium text-gray-500 dark:text-gray-300">/month</span></p>
      <p class="text-sm text-gray-500 dark:text-gray-300">Billed Annually</p>
    </div>
    <ul class="mb-8 space-y-4">
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        Unlimited Projects
      </li>
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        10GB Storage
      </li>
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        Custom Domain
      </li>
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        24/7 Support
      </li>
    </ul>
    <button class="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-300 transform hover:scale-105">
      Get Started
    </button>
  </div>
</div>

Componente di visualizzazione del prezzo

Un componente di visualizzazione dei prezzi reattivo per una dashboard, caratterizzato da microinterazioni coinvolgenti e una combinazione di colori triadica, con supporto per la modalità scura.

Apri anteprima

                <div class="flex flex-col items-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
  <div class="flex items-center space-x-4">
    <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-4 border-indigo-500 dark:border-teal-400 transition-all duration-300 ease-in-out hover:shadow-lg"/>
    <div class="flex flex-col">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Price Display</h2>
      <p class="text-sm text-gray-500 dark:text-gray-400">An example of a price display component.</p>
    </div>
  </div>
  <div class="mt-4 p-4 bg-white dark:bg-gray-700 rounded-lg shadow-lg transition-all duration-300 ease-in-out hover:bg-indigo-200 dark:hover:bg-teal-500">
    <h3 class="text-xl font-bold text-indigo-600 dark:text-teal-300">$99.99</h3>
    <p class="text-sm text-gray-600 dark:text-gray-300">Special Sale Price</p>
    <div class="mt-2 flex justify-between items-center">
      <button class="px-4 py-2 bg-indigo-500 text-white rounded-md shadow-md transform transition-transform hover:scale-105 hover:bg-indigo-600 dark:bg-teal-500 dark:hover:bg-teal-600">Buy Now</button>
      <button class="px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md transition-all duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-500">Details</button>
    </div>
  </div>
</div>

Componente di visualizzazione del prezzo

Un componente di visualizzazione dei prezzi dal design minimalista/piatto per l'uso sul cruscotto, con design reattivo e supporto per la modalità oscura.

Apri anteprima

                <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>

Componente di visualizzazione del prezzo

Un complesso componente di visualizzazione dei prezzi progettato in stile scheumorfico che imita gli elementi del mondo reale, adatto per blog e consumo di contenuti con una combinazione di colori triadica e un design reattivo con supporto per la modalità oscura.

Apri anteprima

                <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>

Componente di visualizzazione del prezzo

Un componente di visualizzazione dei prezzi complesso e reattivo per una dashboard, con supporto per il tema scuro, che utilizza Tailwind CSS in un design piatto minimalista in scala di grigi.

Apri anteprima

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 max-w-sm w-full">
  <div class="flex justify-between items-center mb-4">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Current Price</h2>
    <span class="text-sm text-gray-500 dark:text-gray-400">Updated: Just Now</span>
  </div>
  <div class="flex items-center mb-6">
    <div class="text-4xl font-bold text-gray-900 dark:text-white">$1,234.56</div>
    <div class="flex items-center ml-4">
      <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
      <span class="text-lg font-semibold text-green-500">+1.23%</span>
    </div>
  </div>
  <div class="border-t border-gray-200 dark:border-gray-700 pt-4">
    <div class="text-sm text-gray-600 dark:text-gray-300 mb-2">Historical Data:</div>
    <div class="flex space-x-4">
      <div class="text-center">
        <div class="text-md font-semibold text-gray-800 dark:text-white">High</div>
        <div class="text-sm text-gray-600 dark:text-gray-300">$1,250.00</div>
      </div>
      <div class="text-center">
        <div class="text-md font-semibold text-gray-800 dark:text-white">Low</div>
        <div class="text-sm text-gray-600 dark:text-gray-300">$1,200.00</div>
      </div>
      <div class="text-center">
        <div class="text-md font-semibold text-gray-800 dark:text-white">Volume</div>
        <div class="text-sm text-gray-600 dark:text-gray-300">10k</div>
      </div>
    </div>
  </div>
</div>

Componente di visualizzazione del prezzo

Un componente di visualizzazione dei prezzi ispirato al 3D con una combinazione di colori monocromatica, progettato per le interfacce dei social media. Si tratta di un componente complesso e reattivo con supporto per la modalità oscura, costruito utilizzando Tailwind CSS. Non è incluso alcun JavaScript.

Apri anteprima

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6"> <div class="relative w-full max-w-sm bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden"> <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 opacity-50"></div> <div class="relative z-10 p-8"> <div class="text-center mb-8"> <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-2">Pro Plan</h2> <p class="text-gray-600 dark:text-gray-400">Unlock all features</p> </div> <div class="text-center mb-8"> <span class="text-6xl font-extrabold text-gray-900 dark:text-[var(--monochromatic-color)]">$49</span> <span class="text-2xl font-semibold text-gray-700 dark:text-gray-300">/month</span> </div> <ul class="mb-8 space-y-4"> <li class="flex items-center text-gray-700 dark:text-gray-300"> <svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Unlimited Users </li> <li class="flex items-center text-gray-700 dark:text-gray-300"> <svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> 100GB Storage </li> <li class="flex items-center text-gray-700 dark:text-gray-300"> <svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Email Support </li> <li class="flex items-center text-gray-700 dark:text-gray-300"> <svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Custom Analytics </li> </ul> <a href="#" class="block w-full py-3 text-center text-white font-bold bg-blue-600 dark:bg-[var(--dark-monochromatic-color)] rounded-lg hover:bg-blue-700 dark:hover:bg-[var(--darker-monochromatic-color)] transition duration-300 ease-in-out transform hover:scale-105 shadow-lg"> Get Started </a> </div> </div> <div class="absolute bottom-0 right-0 -mb-20 -mr-20 w-40 h-40 bg-blue-500 dark:bg-[var(--monochromatic-accent-color)] rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000"></div> <div class="absolute bottom-0 left-0 -mb-20 -ml-20 w-40 h-40 bg-purple-500 dark:bg-[var(--monochromatic-secondary-color)] rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000"></div> <div class="absolute top-0 right-0 -mt-20 -mr-20 w-40 h-40 bg-pink-500 dark:bg-[var(--monochromatic-tertiary-color)] rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob"></div> </div>

Componente di visualizzazione del prezzo

Un componente di visualizzazione dei prezzi reattivo con stile neumorfismo e combinazione di colori complementari, progettato per i contenuti del blog con supporto per la modalità scura.

Apri anteprima

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">

  <!-- Price Card -->
  <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphic-light dark:shadow-neumorphic-dark">

    <!-- Card Header -->
    <div class="flex justify-between items-center mb-6">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Basic Plan</h3>
      <span class="text-2xl font-bold text-blue-600 dark:text-teal-400">$29</span>
    </div>

    <!-- Card Features -->
    <ul class="space-y-4 text-gray-700 dark:text-gray-300">
      <li class="flex items-center">
        <svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
        <span>10 Users</span>
      </li>
      <li class="flex items-center">
        <svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
        <span>50GB Storage</span>
      </li>
      <li class="flex items-center">
        <svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
        <span>Email Support</span>
      </li>
    </ul>

    <!-- Call to Action Button -->
    <div class="mt-8">
      <button class="w-full py-3 rounded-lg font-semibold text-white bg-blue-600 dark:bg-teal-600 shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark transition duration-300 hover:opacity-90">
        Get Started
      </button>
    </div>

  </div>

  <!-- Custom Neumorphism Shadows (defined in CSS) -->
  <style>
    .shadow-neumorphic-light {
      box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
       box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #363636;
    }
     .shadow-neumorphic-button-light {
      box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
    }
     .dark .shadow-neumorphic-button-dark {
       box-shadow: 5px 5px 10px #4a4a4a, -5px -5px 10px #363636;
    }
  </style>

</div>

Componente di visualizzazione del prezzo

Un componente di visualizzazione dei prezzi reattivo con un'estetica retrò/vintage e colori vivaci, adatto per le interfacce dei social media, con supporto per la modalità oscura.

Apri anteprima

                <div class="max-w-xs mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-5">
        <img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-40 object-cover rounded-md mb-4">
        <div class="flex items-center mb-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
            <div class="ml-3">
                <h2 class="text-lg text-violet-600 dark:text-violet-400 font-bold">John Doe</h2>
                <span class="text-sm text-gray-600 dark:text-gray-300">@johndoe</span>
            </div>
        </div>
        <h3 class="text-2xl text-red-600 dark:text-red-400 font-semibold mb-2">$49.99</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4">Original Vintage T-Shirt from the 80s.</p>
        <button class="w-full bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-200">Add to Cart</button>
    </div>
</div>

Componente di visualizzazione del prezzo

Componente di visualizzazione dei prezzi con estetica retrò/vintage, design reattivo e supporto per la modalità scura.

Apri anteprima

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="sm:flex sm:items-center px-6 py-4">
        <div class="text-center sm:text-left sm:flex-grow">
            <div class="mb-4">
                <p class="text-xl font-bold text-gray-900 dark:text-white">Product Name</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">Product Description</p>
            </div>
            <div class="flex justify-center sm:justify-start items-baseline">
                <span class="text-2xl font-bold text-gray-900 dark:text-white">$</span>
                <span class="text-4xl font-bold text-gray-900 dark:text-white">19.99</span>
                <span class="text-sm text-gray-600 dark:text-gray-400">/month</span>
            </div>
            <div class="mt-4">
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                    Buy Now
                </button>
            </div>
        </div>
    </div>
</div>

Categorie