Components : Subscription Plans

Preview content adapted to proportion

Subscription Plans

PricePage

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

Displaying three subscription plans with different features and prices.

Users can hover over each plan to see a subtle scale effect, and click the 'Get Started' button to learn more or subscribe.


The layout adjusts based on screen size, showing a single column on mobile devices and three columns on larger screens (md:grid-cols-1 lg:grid-cols-3).

Date : June 02, 2025
Views : 36
Copys : 0

fa-tags

Websites and applications offering subscription-based services, membership platforms, and SaaS products.

Code

<div class="max-w-7xl mx-auto p-8">
 <div class="grid md:grid-cols-1 lg:grid-cols-3 gap-8">
  <div class="bg-[#F9FAFC] rounded-2xl p-8 shadow-xl hover:scale-105 transition-transform duration-300 group">
   <div class="flex flex-col gap-6">
    <div class="bg-gradient-to-br from-[#6D28D9] to-[#BF36FE] w-fit p-4 rounded-xl text-white">
     <span class="text-2xl">
      🚀
     </span>
    </div>
    <h3 class="text-2xl font-bold text-[#0F1A32]">
     Starter Plan
    </h3>
    <div class="flex items-end gap-2">
     <span class="text-4xl font-bold text-[#0F1A32]">
      $29
     </span>
     <span class="text-gray-500">
      /month
     </span>
    </div>
    <ul class="space-y-4 flex-1">
     <li class="flex items-center gap-2 text-[#0F1A32]">
      <i class="fas fa-check text-sm text-[#6D28D9]">
      </i>
      Basic Features
     </li>
     <li class="flex items-center gap-2 text-[#0F1A32]">
      <i class="fas fa-check text-sm text-[#6D28D9]">
      </i>
      5 Team Members
     </li>
    </ul>
    <button class="w-full py-3 rounded-lg bg-gradient-to-br from-[#6D28D9] to-[#BF36FE] text-white font-semibold hover:shadow-lg transition-all">
     Get Started
     <i class="fas fa-angle-right ml-2">
     </i>
    </button>
   </div>
  </div>
  <div class="bg-[#F9FAFC] rounded-2xl p-8 shadow-xl hover:scale-105 transition-transform duration-300 group">
   <div class="flex flex-col gap-6">
    <div class="bg-gradient-to-br from-[#6D28D9] to-[#BF36FE] w-fit p-4 rounded-xl text-white">
     <span class="text-2xl">
      🎯
     </span>
    </div>
    <h3 class="text-2xl font-bold text-[#0F1A32]">
     Pro Plan
    </h3>
    <div class="flex items-end gap-2">
     <span class="text-4xl font-bold text-[#0F1A32]">
      $79
     </span>
     <span class="text-gray-500">
      /month
     </span>
    </div>
    <ul class="space-y-4 flex-1">
     <li class="flex items-center gap-2 text-[#0F1A32]">
      <i class="fas fa-check text-sm text-[#6D28D9]">
      </i>
      Advanced Features
     </li>
     <li class="flex items-center gap-2 text-[#0F1A32]">
      <i class="fas fa-check text-sm text-[#6D28D9]">
      </i>
      15 Team Members
     </li>
    </ul>
    <button class="w-full py-3 rounded-lg bg-gradient-to-br from-[#6D28D9] to-[#BF36FE] text-white font-semibold hover:shadow-lg transition-all">
     Get Started
     <i class="fas fa-angle-right ml-2">
     </i>
    </button>
   </div>
  </div>
  <div class="bg-[#F9FAFC] rounded-2xl p-8 shadow-xl hover:scale-105 transition-transform duration-300 group">
   <div class="flex flex-col gap-6">
    <div class="bg-gradient-to-br from-[#6D28D9] to-[#BF36FE] w-fit p-4 rounded-xl text-white">
     <span class="text-2xl">
      🌟
     </span>
    </div>
    <h3 class="text-2xl font-bold text-[#0F1A32]">
     Enterprise Plan
    </h3>
    <div class="flex items-end gap-2">
     <span class="text-4xl font-bold text-[#0F1A32]">
      $149
     </span>
     <span class="text-gray-500">
      /month
     </span>
    </div>
    <ul class="space-y-4 flex-1">
     <li class="flex items-center gap-2 text-[#0F1A32]">
      <i class="fas fa-check text-sm text-[#6D28D9]">
      </i>
      Premium Features
     </li>
     <li class="flex items-center gap-2 text-[#0F1A32]">
      <i class="fas fa-check text-sm text-[#6D28D9]">
      </i>
      Unlimited Members
     </li>
    </ul>
    <button class="w-full py-3 rounded-lg bg-gradient-to-br from-[#6D28D9] to-[#BF36FE] text-white font-semibold hover:shadow-lg transition-all">
     Get Started
     <i class="fas fa-angle-right ml-2">
     </i>
    </button>
   </div>
  </div>
 </div>
</div>


<template>
 <div class="max-w-7xl mx-auto p-8">
  <div class="grid md:grid-cols-1 lg:grid-cols-3 gap-8">
   <div class="bg-[#F9FAFC] rounded-2xl p-8 shadow-xl hover:scale-105 transition-transform duration-300 group">
    <div class="flex flex-col gap-6">
     <div class="bg-gradient-to-br from-[#6D28D9] to-[#BF36FE] w-fit p-4 rounded-xl text-white">
      <span class="text-2xl">
       🚀
      </span>
     </div>
     <h3 class="text-2xl font-bold text-[#0F1A32]">
      Starter Plan
     </h3>
     <div class="flex items-end gap-2">
      <span class="text-4xl font-bold text-[#0F1A32]">
       $29
      </span>
      <span class="text-gray-500">
       /month
      </span>
     </div>
     <ul class="space-y-4 flex-1">
      <li class="flex items-center gap-2 text-[#0F1A32]">
       <i class="fas fa-check text-sm text-[#6D28D9]">
       </i>
       Basic Features
      </li>
      <li class="flex items-center gap-2 text-[#0F1A32]">
       <i class="fas fa-check text-sm text-[#6D28D9]">
       </i>
       5 Team Members
      </li>
     </ul>
     <button class="w-full py-3 rounded-lg bg-gradient-to-br from-[#6D28D9] to-[#BF36FE] text-white font-semibold hover:shadow-lg transition-all">
      Get Started
      <i class="fas fa-angle-right ml-2">
      </i>
     </button>
    </div>
   </div>
   <div class="bg-[#F9FAFC] rounded-2xl p-8 shadow-xl hover:scale-105 transition-transform duration-300 group">
    <div class="flex flex-col gap-6">
     <div class="bg-gradient-to-br from-[#6D28D9] to-[#BF36FE] w-fit p-4 rounded-xl text-white">
      <span class="text-2xl">
       🎯
      </span>
     </div>
     <h3 class="text-2xl font-bold text-[#0F1A32]">
      Pro Plan
     </h3>
     <div class="flex items-end gap-2">
      <span class="text-4xl font-bold text-[#0F1A32]">
       $79
      </span>
      <span class="text-gray-500">
       /month
      </span>
     </div>
     <ul class="space-y-4 flex-1">
      <li class="flex items-center gap-2 text-[#0F1A32]">
       <i class="fas fa-check text-sm text-[#6D28D9]">
       </i>
       Advanced Features
      </li>
      <li class="flex items-center gap-2 text-[#0F1A32]">
       <i class="fas fa-check text-sm text-[#6D28D9]">
       </i>
       15 Team Members
      </li>
     </ul>
     <button class="w-full py-3 rounded-lg bg-gradient-to-br from-[#6D28D9] to-[#BF36FE] text-white font-semibold hover:shadow-lg transition-all">
      Get Started
      <i class="fas fa-angle-right ml-2">
      </i>
     </button>
    </div>
   </div>
   <div class="bg-[#F9FAFC] rounded-2xl p-8 shadow-xl hover:scale-105 transition-transform duration-300 group">
    <div class="flex flex-col gap-6">
     <div class="bg-gradient-to-br from-[#6D28D9] to-[#BF36FE] w-fit p-4 rounded-xl text-white">
      <span class="text-2xl">
       🌟
      </span>
     </div>
     <h3 class="text-2xl font-bold text-[#0F1A32]">
      Enterprise Plan
     </h3>
     <div class="flex items-end gap-2">
      <span class="text-4xl font-bold text-[#0F1A32]">
       $149
      </span>
      <span class="text-gray-500">
       /month
      </span>
     </div>
     <ul class="space-y-4 flex-1">
      <li class="flex items-center gap-2 text-[#0F1A32]">
       <i class="fas fa-check text-sm text-[#6D28D9]">
       </i>
       Premium Features
      </li>
      <li class="flex items-center gap-2 text-[#0F1A32]">
       <i class="fas fa-check text-sm text-[#6D28D9]">
       </i>
       Unlimited Members
      </li>
     </ul>
     <button class="w-full py-3 rounded-lg bg-gradient-to-br from-[#6D28D9] to-[#BF36FE] text-white font-semibold hover:shadow-lg transition-all">
      Get Started
      <i class="fas fa-angle-right ml-2">
      </i>
     </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 p-8">
 <div class="grid md:grid-cols-1 lg:grid-cols-3 gap-8">
  <div class="bg-[#F9FAFC] rounded-2xl p-8 shadow-xl hover:scale-105 transition-transform duration-300 group">
   <div class="flex flex-col gap-6">
    <div class="bg-gradient-to-br from-[#6D28D9] to-[#BF36FE] w-fit p-4 rounded-xl text-white">
     <span class="text-2xl">
      🚀
     </span>
    </div>
    <h3 class="text-2xl font-bold text-[#0F1A32]">
     Starter Plan
    </h3>
    <div class="flex items-end gap-2">
     <span class="text-4xl font-bold text-[#0F1A32]">
      $29
     </span>
     <span class="text-gray-500">
      /month
     </span>
    </div>
    <ul class="space-y-4 flex-1">
     <li class="flex items-center gap-2 text-[#0F1A32]">
      <i class="fas fa-check text-sm text-[#6D28D9]">
      </i>
      Basic Features
     </li>
     <li class="flex items-center gap-2 text-[#0F1A32]">
      <i class="fas fa-check text-sm text-[#6D28D9]">
      </i>
      5 Team Members
     </li>
    </ul>
    <button class="w-full py-3 rounded-lg bg-gradient-to-br from-[#6D28D9] to-[#BF36FE] text-white font-semibold hover:shadow-lg transition-all">
     Get Started
     <i class="fas fa-angle-right ml-2">
     </i>
    </button>
   </div>
  </div>
  <div class="bg-[#F9FAFC] rounded-2xl p-8 shadow-xl hover:scale-105 transition-transform duration-300 group">
   <div class="flex flex-col gap-6">
    <div class="bg-gradient-to-br from-[#6D28D9] to-[#BF36FE] w-fit p-4 rounded-xl text-white">
     <span class="text-2xl">
      🎯
     </span>
    </div>
    <h3 class="text-2xl font-bold text-[#0F1A32]">
     Pro Plan
    </h3>
    <div class="flex items-end gap-2">
     <span class="text-4xl font-bold text-[#0F1A32]">
      $79
     </span>
     <span class="text-gray-500">
      /month
     </span>
    </div>
    <ul class="space-y-4 flex-1">
     <li class="flex items-center gap-2 text-[#0F1A32]">
      <i class="fas fa-check text-sm text-[#6D28D9]">
      </i>
      Advanced Features
     </li>
     <li class="flex items-center gap-2 text-[#0F1A32]">
      <i class="fas fa-check text-sm text-[#6D28D9]">
      </i>
      15 Team Members
     </li>
    </ul>
    <button class="w-full py-3 rounded-lg bg-gradient-to-br from-[#6D28D9] to-[#BF36FE] text-white font-semibold hover:shadow-lg transition-all">
     Get Started
     <i class="fas fa-angle-right ml-2">
     </i>
    </button>
   </div>
  </div>
  <div class="bg-[#F9FAFC] rounded-2xl p-8 shadow-xl hover:scale-105 transition-transform duration-300 group">
   <div class="flex flex-col gap-6">
    <div class="bg-gradient-to-br from-[#6D28D9] to-[#BF36FE] w-fit p-4 rounded-xl text-white">
     <span class="text-2xl">
      🌟
     </span>
    </div>
    <h3 class="text-2xl font-bold text-[#0F1A32]">
     Enterprise Plan
    </h3>
    <div class="flex items-end gap-2">
     <span class="text-4xl font-bold text-[#0F1A32]">
      $149
     </span>
     <span class="text-gray-500">
      /month
     </span>
    </div>
    <ul class="space-y-4 flex-1">
     <li class="flex items-center gap-2 text-[#0F1A32]">
      <i class="fas fa-check text-sm text-[#6D28D9]">
      </i>
      Premium Features
     </li>
     <li class="flex items-center gap-2 text-[#0F1A32]">
      <i class="fas fa-check text-sm text-[#6D28D9]">
      </i>
      Unlimited Members
     </li>
    </ul>
    <button class="w-full py-3 rounded-lg bg-gradient-to-br from-[#6D28D9] to-[#BF36FE] text-white font-semibold hover:shadow-lg transition-all">
     Get Started
     <i class="fas fa-angle-right ml-2">
     </i>
    </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.

36
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