Components : Premium Pricing Plans

Preview content adapted to proportion

Premium Pricing Plans

PricePage

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

This component displays a set of pricing plans with different tiers, each offering unique features and pricing options.

Users can hover over each plan to see a subtle elevation effect, and click the buttons to start a free trial, get started, contact sales, or schedule a demo.


The layout adjusts based on screen size, with a single column on small screens, two columns on medium screens, and four columns on large screens.

Date : June 14, 2025
Views : 18
Copys : 0

fa-tags

Web applications, SaaS platforms, subscription-based services E-commerce websites, membership sites, product launch pages

Code

<div class="max-w-7xl mx-auto p-8 space-y-8 dark:bg-[#34495E]">
 <h2 class="text-3xl font-bold text-center mb-12 text-[#2D3436] dark:text-[#3498DB]">
  Premium Pricing Plans
 </h2>
 <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
  <div class="group bg-white dark:bg-[#2D3436] rounded-2xl p-8 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
   <div class="flex items-center gap-4 mb-6">
    <span class="text-4xl">
     📘
    </span>
    <h3 class="text-2xl font-semibold text-[#2D3436] dark:text-[#F5F6FA]">
     Basic
    </h3>
   </div>
   <p class="text-[#2D3436]/80 dark:text-[#F5F6FA]/80 mb-6 leading-relaxed">
    Essential features for startups
   </p>
   <div class="flex items-baseline gap-2 mb-8">
    <span class="text-4xl font-bold text-[#4A90E2]">
     $29
    </span>
    <span class="text-[#27AE60]">
     /month
    </span>
   </div>
   <button class="w-full py-3 px-6 bg-gradient-to-r from-[#4A90E2] to-[#6C5CE7] text-white rounded-lg font-medium hover:opacity-90 active:scale-95 transition-all">
    Start Free Trial
   </button>
  </div>
  <div class="group bg-white dark:bg-[#2D3436] rounded-2xl p-8 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
   <div class="flex items-center gap-4 mb-6">
    <span class="text-4xl">
     🚀
    </span>
    <h3 class="text-2xl font-semibold text-[#2D3436] dark:text-[#F5F6FA]">
     Pro
    </h3>
   </div>
   <p class="text-[#2D3436]/80 dark:text-[#F5F6FA]/80 mb-6 leading-relaxed">
    Advanced tools for growing teams
   </p>
   <div class="flex items-baseline gap-2 mb-8">
    <span class="text-4xl font-bold text-[#FFD700]">
     $99
    </span>
    <span class="text-[#27AE60]">
     /month
    </span>
   </div>
   <button class="w-full py-3 px-6 bg-gradient-to-r from-[#4A90E2] to-[#6C5CE7] text-white rounded-lg font-medium hover:opacity-90 active:scale-95 transition-all">
    Get Started
   </button>
  </div>
  <div class="group bg-white dark:bg-[#2D3436] rounded-2xl p-8 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
   <div class="flex items-center gap-4 mb-6">
    <span class="text-4xl">
     💎
    </span>
    <h3 class="text-2xl font-semibold text-[#2D3436] dark:text-[#F5F6FA]">
     Enterprise
    </h3>
   </div>
   <p class="text-[#2D3436]/80 dark:text-[#F5F6FA]/80 mb-6 leading-relaxed">
    Custom solutions for organizations
   </p>
   <div class="flex items-baseline gap-2 mb-8">
    <span class="text-4xl font-bold text-[#27AE60]">
     $299
    </span>
    <span class="text-[#27AE60]">
     /month
    </span>
   </div>
   <button class="w-full py-3 px-6 bg-gradient-to-r from-[#4A90E2] to-[#6C5CE7] text-white rounded-lg font-medium hover:opacity-90 active:scale-95 transition-all">
    Contact Sales
   </button>
  </div>
  <div class="group bg-white dark:bg-[#2D3436] rounded-2xl p-8 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
   <div class="flex items-center gap-4 mb-6">
    <span class="text-4xl">
     🌟
    </span>
    <h3 class="text-2xl font-semibold text-[#2D3436] dark:text-[#F5F6FA]">
     Custom
    </h3>
   </div>
   <p class="text-[#2D3436]/80 dark:text-[#F5F6FA]/80 mb-6 leading-relaxed">
    Tailored solutions for your needs
   </p>
   <div class="flex items-baseline gap-2 mb-8">
    <span class="text-4xl font-bold text-[#6C5CE7]">
     Custom
    </span>
   </div>
   <button class="w-full py-3 px-6 bg-gradient-to-r from-[#4A90E2] to-[#6C5CE7] text-white rounded-lg font-medium hover:opacity-90 active:scale-95 transition-all">
    Schedule Demo
   </button>
  </div>
 </div>
</div>


<template>
 <div class="max-w-7xl mx-auto p-8 space-y-8 dark:bg-[#34495E]">
  <h2 class="text-3xl font-bold text-center mb-12 text-[#2D3436] dark:text-[#3498DB]">
   Premium Pricing Plans
  </h2>
  <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
   <div class="group bg-white dark:bg-[#2D3436] rounded-2xl p-8 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
    <div class="flex items-center gap-4 mb-6">
     <span class="text-4xl">
      📘
     </span>
     <h3 class="text-2xl font-semibold text-[#2D3436] dark:text-[#F5F6FA]">
      Basic
     </h3>
    </div>
    <p class="text-[#2D3436]/80 dark:text-[#F5F6FA]/80 mb-6 leading-relaxed">
     Essential features for startups
    </p>
    <div class="flex items-baseline gap-2 mb-8">
     <span class="text-4xl font-bold text-[#4A90E2]">
      $29
     </span>
     <span class="text-[#27AE60]">
      /month
     </span>
    </div>
    <button class="w-full py-3 px-6 bg-gradient-to-r from-[#4A90E2] to-[#6C5CE7] text-white rounded-lg font-medium hover:opacity-90 active:scale-95 transition-all">
     Start Free Trial
    </button>
   </div>
   <div class="group bg-white dark:bg-[#2D3436] rounded-2xl p-8 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
    <div class="flex items-center gap-4 mb-6">
     <span class="text-4xl">
      🚀
     </span>
     <h3 class="text-2xl font-semibold text-[#2D3436] dark:text-[#F5F6FA]">
      Pro
     </h3>
    </div>
    <p class="text-[#2D3436]/80 dark:text-[#F5F6FA]/80 mb-6 leading-relaxed">
     Advanced tools for growing teams
    </p>
    <div class="flex items-baseline gap-2 mb-8">
     <span class="text-4xl font-bold text-[#FFD700]">
      $99
     </span>
     <span class="text-[#27AE60]">
      /month
     </span>
    </div>
    <button class="w-full py-3 px-6 bg-gradient-to-r from-[#4A90E2] to-[#6C5CE7] text-white rounded-lg font-medium hover:opacity-90 active:scale-95 transition-all">
     Get Started
    </button>
   </div>
   <div class="group bg-white dark:bg-[#2D3436] rounded-2xl p-8 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
    <div class="flex items-center gap-4 mb-6">
     <span class="text-4xl">
      💎
     </span>
     <h3 class="text-2xl font-semibold text-[#2D3436] dark:text-[#F5F6FA]">
      Enterprise
     </h3>
    </div>
    <p class="text-[#2D3436]/80 dark:text-[#F5F6FA]/80 mb-6 leading-relaxed">
     Custom solutions for organizations
    </p>
    <div class="flex items-baseline gap-2 mb-8">
     <span class="text-4xl font-bold text-[#27AE60]">
      $299
     </span>
     <span class="text-[#27AE60]">
      /month
     </span>
    </div>
    <button class="w-full py-3 px-6 bg-gradient-to-r from-[#4A90E2] to-[#6C5CE7] text-white rounded-lg font-medium hover:opacity-90 active:scale-95 transition-all">
     Contact Sales
    </button>
   </div>
   <div class="group bg-white dark:bg-[#2D3436] rounded-2xl p-8 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
    <div class="flex items-center gap-4 mb-6">
     <span class="text-4xl">
      🌟
     </span>
     <h3 class="text-2xl font-semibold text-[#2D3436] dark:text-[#F5F6FA]">
      Custom
     </h3>
    </div>
    <p class="text-[#2D3436]/80 dark:text-[#F5F6FA]/80 mb-6 leading-relaxed">
     Tailored solutions for your needs
    </p>
    <div class="flex items-baseline gap-2 mb-8">
     <span class="text-4xl font-bold text-[#6C5CE7]">
      Custom
     </span>
    </div>
    <button class="w-full py-3 px-6 bg-gradient-to-r from-[#4A90E2] to-[#6C5CE7] text-white rounded-lg font-medium hover:opacity-90 active:scale-95 transition-all">
     Schedule Demo
    </button>
   </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 p-8 space-y-8 dark:bg-[#34495E]">
 <h2 class="text-3xl font-bold text-center mb-12 text-[#2D3436] dark:text-[#3498DB]">
  Premium Pricing Plans
 </h2>
 <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
  <div class="group bg-white dark:bg-[#2D3436] rounded-2xl p-8 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
   <div class="flex items-center gap-4 mb-6">
    <span class="text-4xl">
     📘
    </span>
    <h3 class="text-2xl font-semibold text-[#2D3436] dark:text-[#F5F6FA]">
     Basic
    </h3>
   </div>
   <p class="text-[#2D3436]/80 dark:text-[#F5F6FA]/80 mb-6 leading-relaxed">
    Essential features for startups
   </p>
   <div class="flex items-baseline gap-2 mb-8">
    <span class="text-4xl font-bold text-[#4A90E2]">
     $29
    </span>
    <span class="text-[#27AE60]">
     /month
    </span>
   </div>
   <button class="w-full py-3 px-6 bg-gradient-to-r from-[#4A90E2] to-[#6C5CE7] text-white rounded-lg font-medium hover:opacity-90 active:scale-95 transition-all">
    Start Free Trial
   </button>
  </div>
  <div class="group bg-white dark:bg-[#2D3436] rounded-2xl p-8 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
   <div class="flex items-center gap-4 mb-6">
    <span class="text-4xl">
     🚀
    </span>
    <h3 class="text-2xl font-semibold text-[#2D3436] dark:text-[#F5F6FA]">
     Pro
    </h3>
   </div>
   <p class="text-[#2D3436]/80 dark:text-[#F5F6FA]/80 mb-6 leading-relaxed">
    Advanced tools for growing teams
   </p>
   <div class="flex items-baseline gap-2 mb-8">
    <span class="text-4xl font-bold text-[#FFD700]">
     $99
    </span>
    <span class="text-[#27AE60]">
     /month
    </span>
   </div>
   <button class="w-full py-3 px-6 bg-gradient-to-r from-[#4A90E2] to-[#6C5CE7] text-white rounded-lg font-medium hover:opacity-90 active:scale-95 transition-all">
    Get Started
   </button>
  </div>
  <div class="group bg-white dark:bg-[#2D3436] rounded-2xl p-8 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
   <div class="flex items-center gap-4 mb-6">
    <span class="text-4xl">
     💎
    </span>
    <h3 class="text-2xl font-semibold text-[#2D3436] dark:text-[#F5F6FA]">
     Enterprise
    </h3>
   </div>
   <p class="text-[#2D3436]/80 dark:text-[#F5F6FA]/80 mb-6 leading-relaxed">
    Custom solutions for organizations
   </p>
   <div class="flex items-baseline gap-2 mb-8">
    <span class="text-4xl font-bold text-[#27AE60]">
     $299
    </span>
    <span class="text-[#27AE60]">
     /month
    </span>
   </div>
   <button class="w-full py-3 px-6 bg-gradient-to-r from-[#4A90E2] to-[#6C5CE7] text-white rounded-lg font-medium hover:opacity-90 active:scale-95 transition-all">
    Contact Sales
   </button>
  </div>
  <div class="group bg-white dark:bg-[#2D3436] rounded-2xl p-8 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
   <div class="flex items-center gap-4 mb-6">
    <span class="text-4xl">
     🌟
    </span>
    <h3 class="text-2xl font-semibold text-[#2D3436] dark:text-[#F5F6FA]">
     Custom
    </h3>
   </div>
   <p class="text-[#2D3436]/80 dark:text-[#F5F6FA]/80 mb-6 leading-relaxed">
    Tailored solutions for your needs
   </p>
   <div class="flex items-baseline gap-2 mb-8">
    <span class="text-4xl font-bold text-[#6C5CE7]">
     Custom
    </span>
   </div>
   <button class="w-full py-3 px-6 bg-gradient-to-r from-[#4A90E2] to-[#6C5CE7] text-white rounded-lg font-medium hover:opacity-90 active:scale-95 transition-all">
    Schedule Demo
   </button>
  </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.

37
0

Subscription Plans

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

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

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

8
0