| .plan { | |
| @apply flex flex-col overflow-hidden rounded-3xl p-6 shadow-lg; | |
| @apply shadow-gray-900/5 bg-white; | |
| &.featured { | |
| @apply order-first bg-gray-900 lg:order-none; | |
| } | |
| .plan-title { | |
| @apply flex items-center text-sm font-semibold text-gray-900; | |
| .logo { | |
| @apply h-6 w-6 flex-none; | |
| } | |
| } | |
| .plan-price { | |
| @apply relative mt-5 flex text-3xl tracking-tight text-gray-900; | |
| } | |
| .plan-description { | |
| @apply mt-3 text-sm text-gray-700; | |
| } | |
| .plan-features { | |
| @apply order-last mt-6; | |
| .features-list { | |
| @apply -my-2 divide-y text-sm divide-gray-200 text-gray-700; | |
| } | |
| .feature-item { | |
| @apply flex py-2; | |
| } | |
| } | |
| .plan-button { | |
| @apply mt-6; | |
| } | |
| } | |
| .featured { | |
| .plan-title, | |
| .plan-price { | |
| @apply text-white; | |
| } | |
| .plan-description { | |
| @apply text-gray-300; | |
| } | |
| .features-list { | |
| @apply divide-gray-800 text-gray-300; | |
| } | |
| .check-icon { | |
| @apply text-white; | |
| } | |
| } | |
| .price-transition { | |
| @apply transition duration-300; | |
| } | |
| .price-hidden { | |
| @apply pointer-events-none translate-x-6 select-none opacity-0; | |
| } | |
| .price-absolute { | |
| @apply absolute left-0 top-0; | |
| } | |