50 lines
2.5 KiB
Vue
50 lines
2.5 KiB
Vue
|
<!--
|
||
|
|
This example requires some changes to your config:
|
||
|
|
|
||
|
|
```
|
||
|
|
// tailwind.config.js
|
||
|
|
module.exports = {
|
||
|
|
// ...
|
||
|
|
plugins: [
|
||
|
|
// ...
|
||
|
|
require('@tailwindcss/forms'),
|
||
|
|
],
|
||
|
|
}
|
||
|
|
```
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<RadioGroup v-model="selected">
|
||
|
|
<RadioGroupLabel class="sr-only">Pricing plans</RadioGroupLabel>
|
||
|
|
<div class="relative -space-y-px rounded-md bg-white">
|
||
|
|
<RadioGroupOption as="template" v-for="(plan, planIdx) in plans" :key="plan.name" :value="plan" v-slot="{ checked, active }">
|
||
|
|
<div :class="[planIdx === 0 ? 'rounded-tl-md rounded-tr-md' : '', planIdx === plans.length - 1 ? 'rounded-bl-md rounded-br-md' : '', checked ? 'z-10 border-indigo-200 bg-indigo-50' : 'border-gray-200', 'relative flex cursor-pointer flex-col border p-4 focus:outline-none md:grid md:grid-cols-3 md:pl-4 md:pr-6']">
|
||
|
|
<span class="flex items-center text-sm">
|
||
|
|
<span :class="[checked ? 'bg-indigo-600 border-transparent' : 'bg-white border-gray-300', active ? 'ring-2 ring-offset-2 ring-indigo-600' : '', 'h-4 w-4 rounded-full border flex items-center justify-center']" aria-hidden="true">
|
||
|
|
<span class="rounded-full bg-white w-1.5 h-1.5" />
|
||
|
|
</span>
|
||
|
|
<RadioGroupLabel as="span" :class="[checked ? 'text-indigo-900' : 'text-gray-900', 'ml-3 font-medium']">{{ plan.name }}</RadioGroupLabel>
|
||
|
|
</span>
|
||
|
|
<RadioGroupDescription as="span" class="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
|
||
|
|
<span :class="[checked ? 'text-indigo-900' : 'text-gray-900', 'font-medium']">${{ plan.priceMonthly }} / mo</span>
|
||
|
|
{{ ' ' }}
|
||
|
|
<span :class="checked ? 'text-indigo-700' : 'text-gray-500'">(${{ plan.priceYearly }} / yr)</span>
|
||
|
|
</RadioGroupDescription>
|
||
|
|
<RadioGroupDescription as="span" :class="[checked ? 'text-indigo-700' : 'text-gray-500', 'ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right']">{{ plan.limit }}</RadioGroupDescription>
|
||
|
|
</div>
|
||
|
|
</RadioGroupOption>
|
||
|
|
</div>
|
||
|
|
</RadioGroup>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { RadioGroup, RadioGroupDescription, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
|
||
|
|
|
||
|
|
const plans = [
|
||
|
|
{ name: 'Startup', priceMonthly: 29, priceYearly: 290, limit: 'Up to 5 active job postings' },
|
||
|
|
{ name: 'Business', priceMonthly: 99, priceYearly: 990, limit: 'Up to 25 active job postings' },
|
||
|
|
{ name: 'Enterprise', priceMonthly: 249, priceYearly: 2490, limit: 'Unlimited active job postings' },
|
||
|
|
]
|
||
|
|
|
||
|
|
const selected = ref(plans[0])
|
||
|
|
</script>
|