Components : Pricing Plans

Preview content adapted to proportion

Pricing Plans

PricePage

It is used to present pricing information in a clear and visually appealing manner, helping users to make informed decisions about which plan best suits their needs.

This component displays a set of pricing plans for a product or service, showcasing different tiers with their respective features and prices.

Users can hover over each plan to see a subtle scale effect and shadow change, enhancing the visual experience. Clicking the buttons ('Get Started', 'Upgrade Now', 'Contact Sales') leads to further actions like sign-up or contacting support.


The layout adjusts dynamically based on the screen size, with a single column on mobile devices, two columns on tablets, and three columns on desktops, ensuring optimal readability and aesthetics across devices.

Date : June 20, 2025
Views : 6
Copys : 0

fa-tags

E-commerce websites, SaaS platforms, subscription-based services, membership sites

Code

<div class="max-w-7xl mx-auto px-4 py-12">
 <h2 class="text-3xl font-bold text-center text-[#2D8CFF] mb-12">
  Pricing Plans
 </h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
  <div class="bg-[#1A1A1A] p-8 rounded-2xl shadow-2xl transform transition-all duration-500 hover:scale-105 hover:shadow-[0_20px_50px_rgba(45,140,255,0.2)] active:z-100">
   <div class="flex items-center gap-4 mb-6">
    <span class="text-3xl">
     ⭐️
    </span>
    <h3 class="text-2xl font-semibold text-white">
     Starter
    </h3>
   </div>
   <div class="space-y-4">
    <div class="flex justify-between items-center text-[#2D8CFF]">
     <span>
      Basic Features
     </span>
     <span class="w-6 h-6 bg-gradient-to-r from-[#FF6B8E] to-[#E0E0E0] rounded-full">
     </span>
    </div>
    <div class="flex justify-between text-white">
     <span class="text-4xl font-bold">
      $9
     </span>
     <span class="self-end">
      /month
     </span>
    </div>
    <hr class="border-[#2D8CFF]/30 mt-8 mb-6"/>
    <button class="w-full bg-gradient-to-r from-[#FF6B8E] to-[#E0E0E0] text-white px-6 py-3 rounded-lg transform transition hover:scale-95">
     Get Started
    </button>
   </div>
  </div>
  <div class="bg-[#1A1A1A] p-8 rounded-2xl shadow-2xl transform transition-all duration-500 hover:scale-105 hover:shadow-[0_20px_50px_rgba(255,107,142,0.2)] active:z-100">
   <div class="flex items-center gap-4 mb-6">
    <span class="text-3xl">
     🔥
    </span>
    <h3 class="text-2xl font-semibold text-white">
     Pro
    </h3>
   </div>
   <div class="space-y-4">
    <div class="flex justify-between items-center text-[#FF6B8E]">
     <span>
      Advanced Tools
     </span>
     <span class="w-6 h-6 bg-gradient-to-r from-[#2D8CFF] to-[#E0E0E0] rounded-full">
     </span>
    </div>
    <div class="flex justify-between text-white">
     <span class="text-4xl font-bold">
      $29
     </span>
     <span class="self-end">
      /month
     </span>
    </div>
    <hr class="border-[#FF6B8E]/30 mt-8 mb-6"/>
    <button class="w-full bg-gradient-to-r from-[#2D8CFF] to-[#E0E0E0] text-white px-6 py-3 rounded-lg transform transition hover:scale-95">
     Upgrade Now
    </button>
   </div>
  </div>
  <div class="bg-[#1A1A1A] p-8 rounded-2xl shadow-2xl transform transition-all duration-500 hover:scale-105 hover:shadow-[0_20px_50px_rgba(224,224,224,0.2)] active:z-100">
   <div class="flex items-center gap-4 mb-6">
    <span class="text-3xl">
     💎
    </span>
    <h3 class="text-2xl font-semibold text-white">
     Enterprise
    </h3>
   </div>
   <div class="space-y-4">
    <div class="flex justify-between items-center text-[#E0E0E0]">
     <span>
      Full Suite
     </span>
     <span class="w-6 h-6 bg-gradient-to-r from-[#2D8CFF] to-[#FF6B8E] rounded-full">
     </span>
    </div>
    <div class="flex justify-between text-white">
     <span class="text-4xl font-bold">
      $99
     </span>
     <span class="self-end">
      /month
     </span>
    </div>
    <hr class="border-[#E0E0E0]/30 mt-8 mb-6"/>
    <button class="w-full bg-gradient-to-r from-[#2D8CFF] to-[#FF6B8E] text-white px-6 py-3 rounded-lg transform transition hover:scale-95">
     Contact Sales
    </button>
   </div>
  </div>
 </div>
</div>


<template>
 <div class="max-w-7xl mx-auto px-4 py-12">
  <h2 class="text-3xl font-bold text-center text-[#2D8CFF] mb-12">
   Pricing Plans
  </h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
   <div class="bg-[#1A1A1A] p-8 rounded-2xl shadow-2xl transform transition-all duration-500 hover:scale-105 hover:shadow-[0_20px_50px_rgba(45,140,255,0.2)] active:z-100">
    <div class="flex items-center gap-4 mb-6">
     <span class="text-3xl">
      ⭐️
     </span>
     <h3 class="text-2xl font-semibold text-white">
      Starter
     </h3>
    </div>
    <div class="space-y-4">
     <div class="flex justify-between items-center text-[#2D8CFF]">
      <span>
       Basic Features
      </span>
      <span class="w-6 h-6 bg-gradient-to-r from-[#FF6B8E] to-[#E0E0E0] rounded-full">
      </span>
     </div>
     <div class="flex justify-between text-white">
      <span class="text-4xl font-bold">
       $9
      </span>
      <span class="self-end">
       /month
      </span>
     </div>
     <hr class="border-[#2D8CFF]/30 mt-8 mb-6"/>
     <button class="w-full bg-gradient-to-r from-[#FF6B8E] to-[#E0E0E0] text-white px-6 py-3 rounded-lg transform transition hover:scale-95">
      Get Started
     </button>
    </div>
   </div>
   <div class="bg-[#1A1A1A] p-8 rounded-2xl shadow-2xl transform transition-all duration-500 hover:scale-105 hover:shadow-[0_20px_50px_rgba(255,107,142,0.2)] active:z-100">
    <div class="flex items-center gap-4 mb-6">
     <span class="text-3xl">
      🔥
     </span>
     <h3 class="text-2xl font-semibold text-white">
      Pro
     </h3>
    </div>
    <div class="space-y-4">
     <div class="flex justify-between items-center text-[#FF6B8E]">
      <span>
       Advanced Tools
      </span>
      <span class="w-6 h-6 bg-gradient-to-r from-[#2D8CFF] to-[#E0E0E0] rounded-full">
      </span>
     </div>
     <div class="flex justify-between text-white">
      <span class="text-4xl font-bold">
       $29
      </span>
      <span class="self-end">
       /month
      </span>
     </div>
     <hr class="border-[#FF6B8E]/30 mt-8 mb-6"/>
     <button class="w-full bg-gradient-to-r from-[#2D8CFF] to-[#E0E0E0] text-white px-6 py-3 rounded-lg transform transition hover:scale-95">
      Upgrade Now
     </button>
    </div>
   </div>
   <div class="bg-[#1A1A1A] p-8 rounded-2xl shadow-2xl transform transition-all duration-500 hover:scale-105 hover:shadow-[0_20px_50px_rgba(224,224,224,0.2)] active:z-100">
    <div class="flex items-center gap-4 mb-6">
     <span class="text-3xl">
      💎
     </span>
     <h3 class="text-2xl font-semibold text-white">
      Enterprise
     </h3>
    </div>
    <div class="space-y-4">
     <div class="flex justify-between items-center text-[#E0E0E0]">
      <span>
       Full Suite
      </span>
      <span class="w-6 h-6 bg-gradient-to-r from-[#2D8CFF] to-[#FF6B8E] rounded-full">
      </span>
     </div>
     <div class="flex justify-between text-white">
      <span class="text-4xl font-bold">
       $99
      </span>
      <span class="self-end">
       /month
      </span>
     </div>
     <hr class="border-[#E0E0E0]/30 mt-8 mb-6"/>
     <button class="w-full bg-gradient-to-r from-[#2D8CFF] to-[#FF6B8E] text-white px-6 py-3 rounded-lg transform transition hover:scale-95">
      Contact Sales
     </button>
    </div>
   </div>
  </div>
 </div>
</template>
<script>
 export default {
    name: 'MyPricePageComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const MyPricePageComponent = () => {
    return (
<div>
<div class="max-w-7xl mx-auto px-4 py-12">
 <h2 class="text-3xl font-bold text-center text-[#2D8CFF] mb-12">
  Pricing Plans
 </h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
  <div class="bg-[#1A1A1A] p-8 rounded-2xl shadow-2xl transform transition-all duration-500 hover:scale-105 hover:shadow-[0_20px_50px_rgba(45,140,255,0.2)] active:z-100">
   <div class="flex items-center gap-4 mb-6">
    <span class="text-3xl">
     ⭐️
    </span>
    <h3 class="text-2xl font-semibold text-white">
     Starter
    </h3>
   </div>
   <div class="space-y-4">
    <div class="flex justify-between items-center text-[#2D8CFF]">
     <span>
      Basic Features
     </span>
     <span class="w-6 h-6 bg-gradient-to-r from-[#FF6B8E] to-[#E0E0E0] rounded-full">
     </span>
    </div>
    <div class="flex justify-between text-white">
     <span class="text-4xl font-bold">
      $9
     </span>
     <span class="self-end">
      /month
     </span>
    </div>
    <hr class="border-[#2D8CFF]/30 mt-8 mb-6"/>
    <button class="w-full bg-gradient-to-r from-[#FF6B8E] to-[#E0E0E0] text-white px-6 py-3 rounded-lg transform transition hover:scale-95">
     Get Started
    </button>
   </div>
  </div>
  <div class="bg-[#1A1A1A] p-8 rounded-2xl shadow-2xl transform transition-all duration-500 hover:scale-105 hover:shadow-[0_20px_50px_rgba(255,107,142,0.2)] active:z-100">
   <div class="flex items-center gap-4 mb-6">
    <span class="text-3xl">
     🔥
    </span>
    <h3 class="text-2xl font-semibold text-white">
     Pro
    </h3>
   </div>
   <div class="space-y-4">
    <div class="flex justify-between items-center text-[#FF6B8E]">
     <span>
      Advanced Tools
     </span>
     <span class="w-6 h-6 bg-gradient-to-r from-[#2D8CFF] to-[#E0E0E0] rounded-full">
     </span>
    </div>
    <div class="flex justify-between text-white">
     <span class="text-4xl font-bold">
      $29
     </span>
     <span class="self-end">
      /month
     </span>
    </div>
    <hr class="border-[#FF6B8E]/30 mt-8 mb-6"/>
    <button class="w-full bg-gradient-to-r from-[#2D8CFF] to-[#E0E0E0] text-white px-6 py-3 rounded-lg transform transition hover:scale-95">
     Upgrade Now
    </button>
   </div>
  </div>
  <div class="bg-[#1A1A1A] p-8 rounded-2xl shadow-2xl transform transition-all duration-500 hover:scale-105 hover:shadow-[0_20px_50px_rgba(224,224,224,0.2)] active:z-100">
   <div class="flex items-center gap-4 mb-6">
    <span class="text-3xl">
     💎
    </span>
    <h3 class="text-2xl font-semibold text-white">
     Enterprise
    </h3>
   </div>
   <div class="space-y-4">
    <div class="flex justify-between items-center text-[#E0E0E0]">
     <span>
      Full Suite
     </span>
     <span class="w-6 h-6 bg-gradient-to-r from-[#2D8CFF] to-[#FF6B8E] rounded-full">
     </span>
    </div>
    <div class="flex justify-between text-white">
     <span class="text-4xl font-bold">
      $99
     </span>
     <span class="self-end">
      /month
     </span>
    </div>
    <hr class="border-[#E0E0E0]/30 mt-8 mb-6"/>
    <button class="w-full bg-gradient-to-r from-[#2D8CFF] to-[#FF6B8E] text-white px-6 py-3 rounded-lg transform transition hover:scale-95">
     Contact Sales
    </button>
   </div>
  </div>
 </div>
</div>

</div>
    )
}
export default MyPricePageComponent;

Recommended Related Components

More+

Subscription Plans

To showcase various subscription options to users, allowing them to choose the plan that best fits their needs.

35
0

Subscription Plans

Used on landing pages or pricing sections to showcase various subscription options.

31
0

Premium Pricing Plans

It is used to present various subscription plans to customers, allowing them to choose the one that best fits their needs.

16
0

Pricing Plans

It is used to present pricing information in a clear and visually appealing manner, helping users to make informed decisions about which plan best suits their needs.

6
0