← Corpus / lost-in-public / prompt
Create a Price Card
Design and implement a responsive pricing card component with modern styling
- Path
- prompts/user-interface/Create-a-Price-Card.md
- Authors
- Michael Staton
- Augmented with
- Windsurf Cascade on Claude 3.5 Sonnet
- Tags
- User-Interface · UI-Elements · CSS · Responsive-Design
Inspiration Set
A [[Pricing Card]] from [[GNews]] found at https://gnews.io/#pricing
card--price: {
display: flex;
cursor: pointer;
flex-direction: column;
overflow: hidden;
border-radius: .5rem;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(210 212 237 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
transition-duration: .15s;
transition-timing-function: cubic-bezier(.4,0,.2,1);
}