Cerca componenti

Categorie

Componenti Visualizzazione dei prezzi

Visualizzazione dei prezzi

Componente che mostra le informazioni sui prezzi dei prodotti

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.

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

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

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

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

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

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

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

Componente di visualizzazione del prezzo

Componente di visualizzazione dei prezzi in stile neumorfismo con effetti reattivi e supporto per temi scuri.

Aperto Anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
  <div class="w-full max-w-sm p-6 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl dark:shadow-xl-dark">
    <div class="flex justify-between items-center">
      <h3 class="text-2xl font-bold text-gray-700 dark:text-gray-200">Pro Plan</h3>
      <span class="text-xl font-bold text-gray-600 dark:text-gray-300">$29</span>
    </div>
    <p class="text-gray-600 dark:text-gray-400 mt-2 text-sm">billed monthly</p>
    <ul class="mt-4 space-y-2 text-gray-600 dark:text-gray-400">
      <li class="flex items-center">
        <svg class="h-5 w-5 mr-2 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 13l4 4L19 7"></path></svg>
        <span>Unlimited projects</span>
      </li>
      <li class="flex items-center">
        <svg class="h-5 w-5 mr-2 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 13l4 4L19 7"></path></svg>
        <span>10GB storage</span>
      </li>
      <li class="flex items-center">
        <svg class="h-5 w-5 mr-2 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 13l4 4L19 7"></path></svg>
        <span>Priority support</span>
      </li>
    </ul>
    <button class="mt-6 w-full py-3 bg-blue-500 text-white rounded-md font-bold shadow-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300">
      Choose Plan
    </button>
  </div>
</div>

<style>
.shadow-xl {
  box-shadow: 10px 10px 20px #babecc, -10px -10px 20px #ffffff;
}
.dark .shadow-xl-dark {
  box-shadow: 10px 10px 20px #718096, -10px -10px 20px #4a5568;
}
</style>

Componente di visualizzazione del prezzo

Un componente di visualizzazione del prezzo minimo con supporto per la modalità reattiva e scura

Aperto Anteprima

                <div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  <div>
    <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
      <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"></svg>
    </span>
  </div>
  <h3 class="mt-5 text-base font-medium tracking-tight text-slate-900 dark:text-white">Price</h3>
  <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
    <span class="text-2xl font-bold text-slate-900 dark:text-white">$99.99</span>/month
  </p>
</div>

Componente di visualizzazione del prezzo

Un componente di visualizzazione dei prezzi in stile 3D che supporta la modalità oscura e gli effetti reattivi, mostrando i dettagli del prezzo del prodotto.

Aperto Anteprima

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