tailwind实现响应式价格套餐选择效果代码
代码语言:html
所属分类:响应式
代码描述:tailwind实现响应式价格套餐选择效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.1.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> </head> <body class="bg-gradient-to-b from-10% via-50% to-90% from-amber-300 via-amber-900 to-amber-300 flex justify-center items-center min-h-screen p-4"> <input type="radio" id="billing-1" name="billing" class="sr-only peer/billing-1" checked> <input type="radio" id="billing-2" name="billing" class="sr-only peer/billing-2"> <div class="bg-zinc-300 shadow-lg w-full max-w-4xl border grid gap-px ring-4 ring-black/5 rounded [grid-template-columns:repeat(auto-fill,minmax(12rem,1fr))] *:p-10 *:bg-white *:flex *:flex-col *:items-center *:justify-center *:gap-2 *:text-center *:transition-all *:duration-300 first:*:text-left [&_p]:whitespace-nowrap [&_h2]:whitespace-nowrap [&_h2]:font-medium [&_h2]:tracking-wider [&_h2]:text-lg [&_button]:border-none [&_button]:outline-none [&_button]:ring-0 [&_button]:py-2 [&_button]:px-4 [&_button]:bg-black [&_button]:text-white [&_button]:rounded-md [&_button]:w-fit [&_button]:mx-auto [&_button]:transition-all [&_button]:duration-300 [&_.prices]:p-2 [&_.prices]:grid [&_.prices]:[grid-template-areas:'stack'] [&_.prices>p]:[grid-area:stack] [&_.prices>p]:transition-all [&_.prices>p]:duration-500 [&_.prices>p]:ease-in-out [&_.prices]:overflow-hidden [&_.prices_span]:text-sm first:[&_.prices>p]:-translate-y-12 first:[&_.prices>p]:text-amber-500 last:[&_.prices>p]:translate-y-12 last:[&_.prices>p]:text-sky-600 peer-checked/billing-1:after:[&_#label-billing-1]:scale-100 peer-checked/billing-1:after:[&_#label-billing-1]:bg-amber-500 peer-checked/billing-1:[&_#label-billing-1]:text-amber-500 peer-checked/billing-1:hover:*:bg-amber-100 peer-checked/billing-1:hover:[&_button]:bg-amber-600 peer-checked/billing-1:hover:[&_a]:text-amber-600 peer-checked/billing-1:first:[&_.prices>p]:translate-y-0 peer-checked/billing-2:after:[&_#label-billing-2]:scale-100 peer-checked/billing-2:last:[&_.prices>p]:translate-y-0 peer-checked/billing-2:hover:*:bg-sky-100 peer-checked/billing-2:h.........完整代码请登录后点击上方下载按钮下载查看
网友评论0