Interactive Pricing Card
Mark Sikaundi
August 24, 2024
Create an Interactive Pricing Component using React and Tailwind CSS. This pricing component should have interactive pricing cards that change the pricing based on the user's selection. The pricing component should include the following features:
This Interactive Pricing Component includes the following features:
- A slider to select different pageview tiers
- A toggle switch to choose between monthly and yearly billing
- Dynamic price calculation based on the selected tier and billing frequency
- A 25% discount applied for yearly billing
- Responsive design for various screen sizes
- A list of included features
- A call-to-action button
USE THIS DATA
[
{
"pageviews": "10K",
"price": 8
},
{
"pageviews": "50K",
"price": 12
},
{
"pageviews": "100K",
"price": 16
},
{
"pageviews": "500K",
"price": 24
},
{
"pageviews": "1M",
"price": 36
}
]The component uses the following shadcn/ui components:
- `Slider` for selecting the pageview tier
- `Switch` for toggling between monthly and yearly billing
- `Button` for the call-to-action
- `Tooltip` for displaying additional information about yearly billing savings
Here's a preview of Price Card:
Simple, traffic-based pricing
100K Pageviews
$16.00/ month
Monthly BillingYearly Billing
- Unlimited websites
- 100% data ownership
- Email reports
Note:
The component should use Tailwind CSS for styling, making it easy to customize colors, spacing, and other design aspects. The pricing component should be interactive and update the pricing in real-time based on the user's selection. The component should be responsive and adapt to different screen sizes.