Components Product Comparison Product Comparison Component - Neumorphism Monochromatic

Product Comparison Component - Neumorphism Monochromatic

A responsive product comparison component with a neumorphic design style and a monochromatic color scheme, suitable for event/conference websites. Includes dark mode support.

Preview

HTML Code

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

  <div class="container mx-auto p-4 md:p-8 rounded-3xl shadow-xl dark:shadow-xl-dark bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200">

    <h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-center mb-10 tracking-tight leading-tight transition-colors duration-300">
      Choose Your <span class="text-purple-600 dark:text-purple-400">Event Pass</span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Plan 1: Basic Pass -->
      <div class="flex flex-col p-6 rounded-3xl bg-gray-200 dark:bg-gray-700 shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">
        <div class="flex-grow">
          <h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-300">Standard Access</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-6">Ideal for basic conference attendance and networking.</p>

          <div class="text-4xl font-extrabold mb-8">
            $99<span class="text-lg font-medium text-gray-500 dark:text-gray-400">/pass</span>
          </div>

          <ul class="list-none space-y-4 mb-8 text-gray-700 dark:text-gray-300">
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" 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>
              Access to Main Sessions
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" 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>
              Networking Opportunities
            </li>
            <li class="flex items-center line-through text-gray-500 dark:text-gray-500">
              <svg class="w-6 h-6 text-red-500 mr-2" 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="M6 18L18 6M6 6l12 12"></path></svg>
              Workshop Access
            </li>
            <li class="flex items-center line-through text-gray-500 dark:text-gray-500">
              <svg class="w-6 h-6 text-red-500 mr-2" 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="M6 18L18 6M6 6l12 12"></path></svg>
              Exclusive Q&A Sessions
            </li>
          </ul>
        </div>
        <button class="w-full py-3 px-6 bg-purple-600 dark:bg-purple-500 text-white rounded-xl shadow-neumorphic-button dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-hover dark:hover:shadow-neumorphic-button-dark-hover transition-all duration-300 font-semibold focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          Get Standard Pass
        </button>
      </div>

      <!-- Plan 2: Premium Pass (Recommended) -->
      <div class="flex flex-col p-6 rounded-3xl bg-gray-200 dark:bg-gray-700 shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover relative border-2 border-purple-500 dark:border-purple-400">
        <div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-purple-500 dark:bg-purple-400 text-white text-sm font-bold rounded-full shadow-md">
          Recommended
        </div>
        <div class="flex-grow">
          <h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-300">VIP Experience</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-6">Full access to all event features and exclusive content.</p>

          <div class="text-4xl font-extrabold mb-8">
            $249<span class="text-lg font-medium text-gray-500 dark:text-gray-400">/pass</span>
          </div>

          <ul class="list-none space-y-4 mb-8 text-gray-700 dark:text-gray-300">
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" 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>
              Access to Main Sessions
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" 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>
              Networking Opportunities
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" 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>
              Full Workshop Access
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" 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>
              Exclusive Q&A Sessions
            </li>
          </ul>
        </div>
        <button class="w-full py-3 px-6 bg-purple-600 dark:bg-purple-500 text-white rounded-xl shadow-neumorphic-button dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-hover dark:hover:shadow-neumorphic-button-dark-hover transition-all duration-300 font-semibold focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          Get VIP Pass
        </button>
      </div>

      <!-- Plan 3: Enterprise Pass -->
      <div class="flex flex-col p-6 rounded-3xl bg-gray-200 dark:bg-gray-700 shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">
        <div class="flex-grow">
          <h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-300">Team Bundle</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-6">Designed for teams, with additional benefits and support.</p>

          <div class="text-4xl font-extrabold mb-8">
            $499<span class="text-lg font-medium text-gray-500 dark:text-gray-400">/5 passes</span>
          </div>

          <ul class="list-none space-y-4 mb-8 text-gray-700 dark:text-gray-300">
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" 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>
              All VIP Pass Features
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" 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>
              5 Team Members Included
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" 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>
              Dedicated Support
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" 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>
              Private Networking Lounge Access
            </li>
          </ul>
        </div>
        <button class="w-full py-3 px-6 bg-purple-600 dark:bg-purple-500 hover:bg-purple-700 text-white rounded-xl shadow-neumorphic-button dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-hover dark:hover:shadow-neumorphic-button-dark-hover transition-all duration-300 font-semibold focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          Get Team Bundle
        </button>
      </div>

    </div>
  </div>

  <!-- Tailwind JIT custom styles for neumorphism shadows (typically in tailwind.config.js) -->
  <style>
    .shadow-xl {
      box-shadow: 10px 10px 20px rgba(174, 174, 192, .4), -10px -10px 20px rgba(255, 255, 255, 1);
    }
    .dark\:shadow-xl-dark {
      box-shadow: 10px 10px 20px rgba(0, 0, 0, .4), -10px -10px 20px rgba(120, 120, 120, .2);
    }
    .shadow-neumorphic {
      box-shadow: 8px 8px 16px rgba(174, 174, 192, .4), -8px -8px 16px rgba(255, 255, 255, 1);
    }
    .dark\:shadow-neumorphic {
      box-shadow: 8px 8px 16px rgba(0, 0, 0, .4), -8px -8px 16px rgba(120, 120, 120, .2);
    }
    .hover\:shadow-neumorphic-hover:hover {
      box-shadow: 4px 4px 8px rgba(174, 174, 192, .4), -4px -4px 8px rgba(255, 255, 255, 1);
    }
    .dark\:hover\:shadow-neumorphic-dark-hover:hover {
      box-shadow: 4px 4px 8px rgba(0, 0, 0, .4), -4px -4px 8px rgba(120, 120, 120, .2);
    }

    .shadow-neumorphic-button {
      box-shadow: 3px 3px 6px rgba(174, 174, 192, .4), -3px -3px 6px rgba(255, 255, 255, 1);
    }
    .dark\:shadow-neumorphic-button-dark {
      box-shadow: 3px 3px 6px rgba(0, 0, 0, .4), -3px -3px 6px rgba(120, 120, 120, .2);
    }
    .hover\:shadow-neumorphic-button-hover:hover {
      box-shadow: inset 2px 2px 5px rgba(174, 174, 192, .4), inset -3px -3px 7px rgba(255, 255, 255, 1);
    }
    .dark\:hover\:shadow-neumorphic-button-dark-hover:hover {
      box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .6), inset -3px -3px 7px rgba(120, 120, 120, .3);
    }
  </style>

</div>

Related Components

Product Comparison Component - Retro Corporate Style

A responsive product comparison component with a retro/vintage corporate aesthetic using monochromatic blue color scheme. Features multiple interactive elements and dark mode support. The design includes retro-styled cards with 80s/90s inspired geometric patterns, old-school typography, and pixel-like accents. Perfect for business websites wanting to stand out with nostalgic design while maintaining professionalism.

Open

Product Comparison Component

A Product Comparison Component with a Brutalist design style, featuring vibrant colors and moderate complexity to showcase products or work in a portfolio.

Open

EarthyProductComparison

A responsive product comparison component for e-commerce, featuring three product cards. Styled with Tailwind CSS using an earth tone color scheme (browns, greens, ambers) and simple 3D design elements like shadows and accent bars for depth and engagement. Includes dark mode support and uses placeholder images from picsum.photos.

Open