Components : Subscription Plans

Preview content adapted to proportion

Subscription Plans

PricePage

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

Displays a set of subscription plans with different features and prices.

Interactive elements include hover effects on plan cards and buttons, with visual feedback like scaling and shadow changes.


The layout adjusts responsively, using a grid system that stacks plans into a single column on smaller screens and arranges them in three columns on larger screens.

Date : June 08, 2025
Views : 33
Copys : 0

fa-tags

Landing pages, pricing sections, product pages

Code

<div class="min-h-screen bg-gray-900 p-8 md:p-12">
 <div class="mx-auto grid max-w-6xl gap-8 md:grid-cols-3">
  <div class="group relative flex flex-col space-y-6 rounded-2xl bg-gradient-to-br from-blue-900 to-blue-600 p-8 transition-all duration-800 hover:scale-105 hover:shadow-2xl hover:ring-2 hover:ring-cyan-300 md:h-96">
   <div class="absolute right-4 top-4 rounded-full bg-amber-300 px-3 py-1 text-sm font-bold text-gray-900">
    POPULAR
   </div>
   <div class="flex items-center space-x-2">
    <span class="text-4xl">
     🚀
    </span>
    <h3 class="text-2xl font-bold text-white">
     Starter
    </h3>
   </div>
   <div class="flex items-baseline space-x-2">
    <span class="text-2xl text-cyan-200">
     $
    </span>
    <p class="text-5xl font-bold text-white">
     29
    </p>
    <span class="text-gray-300">
     /month
    </span>
   </div>
   <div class="h-px bg-gradient-to-r from-cyan-400/20 to-transparent">
   </div>
   <ul class="space-y-4 text-gray-200">
    <li class="flex items-center space-x-2">
     <span>
      ✔️
     </span>
     <span>
      5 Projects
     </span>
    </li>
    <li class="flex items-center space-x-2">
     <span>
      ✔️
     </span>
     <span>
      10GB Storage
     </span>
    </li>
    <li class="flex items-center space-x-2">
     <span>
      ✔️
     </span>
     <span>
      Basic Support
     </span>
    </li>
   </ul>
   <button class="mt-auto w-full rounded-xl bg-cyan-500 py-3 font-bold text-white transition-all hover:bg-cyan-400 active:scale-95 active:bg-cyan-300">
    Start Free Trial
   </button>
  </div>
  <div class="group relative flex flex-col space-y-6 rounded-2xl bg-gradient-to-br from-emerald-800 to-emerald-600 p-8 transition-all duration-800 hover:scale-105 hover:shadow-2xl hover:ring-2 hover:ring-emerald-300 md:h-96">
   <div class="absolute right-4 top-4 rounded-full bg-amber-300 px-3 py-1 text-sm font-bold text-gray-900">
    LIMITED
   </div>
   <div class="flex items-center space-x-2">
    <span class="text-4xl">
     🌿
    </span>
    <h3 class="text-2xl font-bold text-white">
     Professional
    </h3>
   </div>
   <div class="flex items-baseline space-x-2">
    <span class="text-2xl text-emerald-200">
     $
    </span>
    <p class="text-5xl font-bold text-white">
     99
    </p>
    <span class="text-gray-300">
     /month
    </span>
   </div>
   <div class="h-px bg-gradient-to-r from-emerald-400/20 to-transparent">
   </div>
   <ul class="space-y-4 text-gray-200">
    <li class="flex items-center space-x-2">
     <span>
      ✔️
     </span>
     <span>
      Unlimited Projects
     </span>
    </li>
    <li class="flex items-center space-x-2">
     <span>
      ✔️
     </span>
     <span>
      50GB Storage
     </span>
    </li>
    <li class="flex items-center space-x-2">
     <span>
      ✔️
     </span>
     <span>
      Priority Support
     </span>
    </li>
   </ul>
   <button class="mt-auto w-full rounded-xl bg-emerald-500 py-3 font-bold text-white transition-all hover:bg-emerald-400 active:scale-95 active:bg-emerald-300">
    Get Started
   </button>
  </div>
  <div class="group relative flex flex-col space-y-6 rounded-2xl bg-gradient-to-br from-purple-900 to-purple-600 p-8 transition-all duration-800 hover:scale-105 hover:shadow-2xl hover:ring-2 hover:ring-purple-300 md:h-96">
   <div class="absolute right-4 top-4 rounded-full bg-amber-300 px-3 py-1 text-sm font-bold text-gray-900">
    PREMIUM
   </div>
   <div class="flex items-center space-x-2">
    <span class="text-4xl">
     ⚡
    </span>
    <h3 class="text-2xl font-bold text-white">
     Enterprise
    </h3>
   </div>
   <div class="flex items-baseline space-x-2">
    <span class="text-2xl text-purple-200">
     $
    </span>
    <p class="text-5xl font-bold text-white">
     199
    </p>
    <span class="text-gray-300">
     /month
    </span>
   </div>
   <div class="h-px bg-gradient-to-r from-purple-400/20 to-transparent">
   </div>
   <ul class="space-y-4 text-gray-200">
    <li class="flex items-center space-x-2">
     <span>
      ✔️
     </span>
     <span>
      Custom Solutions
     </span>
    </li>
    <li class="flex items-center space-x-2">
     <span>
      ✔️
     </span>
     <span>
      1TB Storage
     </span>
    </li>
    <li class="flex items-center space-x-2">
     <span>
      ✔️
     </span>
     <span>
      24/7 Support
     </span>
    </li>
   </ul>
   <button class="mt-auto w-full rounded-xl bg-purple-500 py-3 font-bold text-white transition-all hover:bg-purple-400 active:scale-95 active:bg-purple-300">
    Contact Sales
   </button>
  </div>
 </div>
</div>


<template>
 <div class="min-h-screen bg-gray-900 p-8 md:p-12">
  <div class="mx-auto grid max-w-6xl gap-8 md:grid-cols-3">
   <div class="group relative flex flex-col space-y-6 rounded-2xl bg-gradient-to-br from-blue-900 to-blue-600 p-8 transition-all duration-800 hover:scale-105 hover:shadow-2xl hover:ring-2 hover:ring-cyan-300 md:h-96">
    <div class="absolute right-4 top-4 rounded-full bg-amber-300 px-3 py-1 text-sm font-bold text-gray-900">
     POPULAR
    </div>
    <div class="flex items-center space-x-2">
     <span class="text-4xl">
      🚀
     </span>
     <h3 class="text-2xl font-bold text-white">
      Starter
     </h3>
    </div>
    <div class="flex items-baseline space-x-2">
     <span class="text-2xl text-cyan-200">
      $
     </span>
     <p class="text-5xl font-bold text-white">
      29
     </p>
     <span class="text-gray-300">
      /month
     </span>
    </div>
    <div class="h-px bg-gradient-to-r from-cyan-400/20 to-transparent">
    </div>
    <ul class="space-y-4 text-gray-200">
     <li class="flex items-center space-x-2">
      <span>
       ✔️
      </span>
      <span>
       5 Projects
      </span>
     </li>
     <li class="flex items-center space-x-2">
      <span>
       ✔️
      </span>
      <span>
       10GB Storage
      </span>
     </li>
     <li class="flex items-center space-x-2">
      <span>
       ✔️
      </span>
      <span>
       Basic Support
      </span>
     </li>
    </ul>
    <button class="mt-auto w-full rounded-xl bg-cyan-500 py-3 font-bold text-white transition-all hover:bg-cyan-400 active:scale-95 active:bg-cyan-300">
     Start Free Trial
    </button>
   </div>
   <div class="group relative flex flex-col space-y-6 rounded-2xl bg-gradient-to-br from-emerald-800 to-emerald-600 p-8 transition-all duration-800 hover:scale-105 hover:shadow-2xl hover:ring-2 hover:ring-emerald-300 md:h-96">
    <div class="absolute right-4 top-4 rounded-full bg-amber-300 px-3 py-1 text-sm font-bold text-gray-900">
     LIMITED
    </div>
    <div class="flex items-center space-x-2">
     <span class="text-4xl">
      🌿
     </span>
     <h3 class="text-2xl font-bold text-white">
      Professional
     </h3>
    </div>
    <div class="flex items-baseline space-x-2">
     <span class="text-2xl text-emerald-200">
      $
     </span>
     <p class="text-5xl font-bold text-white">
      99
     </p>
     <span class="text-gray-300">
      /month
     </span>
    </div>
    <div class="h-px bg-gradient-to-r from-emerald-400/20 to-transparent">
    </div>
    <ul class="space-y-4 text-gray-200">
     <li class="flex items-center space-x-2">
      <span>
       ✔️
      </span>
      <span>
       Unlimited Projects
      </span>
     </li>
     <li class="flex items-center space-x-2">
      <span>
       ✔️
      </span>
      <span>
       50GB Storage
      </span>
     </li>
     <li class="flex items-center space-x-2">
      <span>
       ✔️
      </span>
      <span>
       Priority Support
      </span>
     </li>
    </ul>
    <button class="mt-auto w-full rounded-xl bg-emerald-500 py-3 font-bold text-white transition-all hover:bg-emerald-400 active:scale-95 active:bg-emerald-300">
     Get Started
    </button>
   </div>
   <div class="group relative flex flex-col space-y-6 rounded-2xl bg-gradient-to-br from-purple-900 to-purple-600 p-8 transition-all duration-800 hover:scale-105 hover:shadow-2xl hover:ring-2 hover:ring-purple-300 md:h-96">
    <div class="absolute right-4 top-4 rounded-full bg-amber-300 px-3 py-1 text-sm font-bold text-gray-900">
     PREMIUM
    </div>
    <div class="flex items-center space-x-2">
     <span class="text-4xl">
      ⚡
     </span>
     <h3 class="text-2xl font-bold text-white">
      Enterprise
     </h3>
    </div>
    <div class="flex items-baseline space-x-2">
     <span class="text-2xl text-purple-200">
      $
     </span>
     <p class="text-5xl font-bold text-white">
      199
     </p>
     <span class="text-gray-300">
      /month
     </span>
    </div>
    <div class="h-px bg-gradient-to-r from-purple-400/20 to-transparent">
    </div>
    <ul class="space-y-4 text-gray-200">
     <li class="flex items-center space-x-2">
      <span>
       ✔️
      </span>
      <span>
       Custom Solutions
      </span>
     </li>
     <li class="flex items-center space-x-2">
      <span>
       ✔️
      </span>
      <span>
       1TB Storage
      </span>
     </li>
     <li class="flex items-center space-x-2">
      <span>
       ✔️
      </span>
      <span>
       24/7 Support
      </span>
     </li>
    </ul>
    <button class="mt-auto w-full rounded-xl bg-purple-500 py-3 font-bold text-white transition-all hover:bg-purple-400 active:scale-95 active:bg-purple-300">
     Contact Sales
    </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="min-h-screen bg-gray-900 p-8 md:p-12">
 <div class="mx-auto grid max-w-6xl gap-8 md:grid-cols-3">
  <div class="group relative flex flex-col space-y-6 rounded-2xl bg-gradient-to-br from-blue-900 to-blue-600 p-8 transition-all duration-800 hover:scale-105 hover:shadow-2xl hover:ring-2 hover:ring-cyan-300 md:h-96">
   <div class="absolute right-4 top-4 rounded-full bg-amber-300 px-3 py-1 text-sm font-bold text-gray-900">
    POPULAR
   </div>
   <div class="flex items-center space-x-2">
    <span class="text-4xl">
     🚀
    </span>
    <h3 class="text-2xl font-bold text-white">
     Starter
    </h3>
   </div>
   <div class="flex items-baseline space-x-2">
    <span class="text-2xl text-cyan-200">
     $
    </span>
    <p class="text-5xl font-bold text-white">
     29
    </p>
    <span class="text-gray-300">
     /month
    </span>
   </div>
   <div class="h-px bg-gradient-to-r from-cyan-400/20 to-transparent">
   </div>
   <ul class="space-y-4 text-gray-200">
    <li class="flex items-center space-x-2">
     <span>
      ✔️
     </span>
     <span>
      5 Projects
     </span>
    </li>
    <li class="flex items-center space-x-2">
     <span>
      ✔️
     </span>
     <span>
      10GB Storage
     </span>
    </li>
    <li class="flex items-center space-x-2">
     <span>
      ✔️
     </span>
     <span>
      Basic Support
     </span>
    </li>
   </ul>
   <button class="mt-auto w-full rounded-xl bg-cyan-500 py-3 font-bold text-white transition-all hover:bg-cyan-400 active:scale-95 active:bg-cyan-300">
    Start Free Trial
   </button>
  </div>
  <div class="group relative flex flex-col space-y-6 rounded-2xl bg-gradient-to-br from-emerald-800 to-emerald-600 p-8 transition-all duration-800 hover:scale-105 hover:shadow-2xl hover:ring-2 hover:ring-emerald-300 md:h-96">
   <div class="absolute right-4 top-4 rounded-full bg-amber-300 px-3 py-1 text-sm font-bold text-gray-900">
    LIMITED
   </div>
   <div class="flex items-center space-x-2">
    <span class="text-4xl">
     🌿
    </span>
    <h3 class="text-2xl font-bold text-white">
     Professional
    </h3>
   </div>
   <div class="flex items-baseline space-x-2">
    <span class="text-2xl text-emerald-200">
     $
    </span>
    <p class="text-5xl font-bold text-white">
     99
    </p>
    <span class="text-gray-300">
     /month
    </span>
   </div>
   <div class="h-px bg-gradient-to-r from-emerald-400/20 to-transparent">
   </div>
   <ul class="space-y-4 text-gray-200">
    <li class="flex items-center space-x-2">
     <span>
      ✔️
     </span>
     <span>
      Unlimited Projects
     </span>
    </li>
    <li class="flex items-center space-x-2">
     <span>
      ✔️
     </span>
     <span>
      50GB Storage
     </span>
    </li>
    <li class="flex items-center space-x-2">
     <span>
      ✔️
     </span>
     <span>
      Priority Support
     </span>
    </li>
   </ul>
   <button class="mt-auto w-full rounded-xl bg-emerald-500 py-3 font-bold text-white transition-all hover:bg-emerald-400 active:scale-95 active:bg-emerald-300">
    Get Started
   </button>
  </div>
  <div class="group relative flex flex-col space-y-6 rounded-2xl bg-gradient-to-br from-purple-900 to-purple-600 p-8 transition-all duration-800 hover:scale-105 hover:shadow-2xl hover:ring-2 hover:ring-purple-300 md:h-96">
   <div class="absolute right-4 top-4 rounded-full bg-amber-300 px-3 py-1 text-sm font-bold text-gray-900">
    PREMIUM
   </div>
   <div class="flex items-center space-x-2">
    <span class="text-4xl">
     ⚡
    </span>
    <h3 class="text-2xl font-bold text-white">
     Enterprise
    </h3>
   </div>
   <div class="flex items-baseline space-x-2">
    <span class="text-2xl text-purple-200">
     $
    </span>
    <p class="text-5xl font-bold text-white">
     199
    </p>
    <span class="text-gray-300">
     /month
    </span>
   </div>
   <div class="h-px bg-gradient-to-r from-purple-400/20 to-transparent">
   </div>
   <ul class="space-y-4 text-gray-200">
    <li class="flex items-center space-x-2">
     <span>
      ✔️
     </span>
     <span>
      Custom Solutions
     </span>
    </li>
    <li class="flex items-center space-x-2">
     <span>
      ✔️
     </span>
     <span>
      1TB Storage
     </span>
    </li>
    <li class="flex items-center space-x-2">
     <span>
      ✔️
     </span>
     <span>
      24/7 Support
     </span>
    </li>
   </ul>
   <button class="mt-auto w-full rounded-xl bg-purple-500 py-3 font-bold text-white transition-all hover:bg-purple-400 active:scale-95 active:bg-purple-300">
    Contact Sales
   </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.

17
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