primeflex实现价格套餐选择列表效果代码
代码语言：html
所属分类：布局界面
代码描述：primeflex实现价格套餐选择列表效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/primeflex.css">
<link rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/primeflex/saga-blue.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">
<style>
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="flex lg:flex-row flex-column lg:justify-content-center align-items-center lg:p-8 p-4 font-sans text-white bg-bluegray-900 min-h-screen">
<div class="lg:w-23rem w-full border-2 lg:border-right-none border-bluegray-800 p-5">
<div class="pb-3 mb-4 border-bottom-1 border-bluegray-800">
<div class="text-xs text-bluegray-400 mb-2">
START
</div>
<h2 class="text-5xl m-0 font-normal">Free</h2>
</div>
<div class="flex align-items-center mb-2">
<svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path>
</svg>Vexillologist pitchfork
</div>
<div class="flex align-items-center mb-2">
<svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path>
</svg>
Tumeric plaid portland
</div>
<div class="flex align-items-center mb-5">
<svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path>
</svg>Mixtape chillwave tumeric
</div>
<div class="mt-auto w-full">
<button class="bg-bluegray-800 cursor-pointer text-white py-2 border-none w-full flex align-items-center px-3">
Button
<svg class="ml-auto" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.75 6.75L19.25 12L13.75 17.25"></path>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 12H4.75"></path>
</svg>
</button>
<div class="text-xs mt-3 text-bluegray-600 line-height-2">
Literally you probably haven't heard of them jean shorts.
</div>
</div>
</div>
<div class="lg:w-23rem w-full lg:my-0 my-4 border-2 border-bluegray-800 p-5 lg:shadow-8">
<div class="pb-3 mb-4 border-bottom-1 border-bluegray-800">
<div class="text-xs text-bluegray-400 mb-2">
PRO
</div>
<div class="flex align-items-center">
<h2 class="text-5xl m-0 font-normal">$38</h2>
<span class="text-bluegray-300 ml-1">/mo</span>
</div>
</div>
<div class="flex align-items-center mb-2">
<svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path>
</svg>Vexillologist pitchfork
</div>
<div class="flex align-items-center mb-2">
<svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path>
</svg>
Tumeric plaid portland
</div>
<div class="flex align-items-center mb-2">
<svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24">
<path.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0