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/tailwind.3.2.4.js"></script> </head> <body> <main class="w-screen h-screen flex flex-col"> <section class="w-full flex-grow bg-zinc-200 flex items-center justify-center p-4"> <div class="flex w-full max-w-3xl text-zinc-50 h-64"> <div class="h-full bg-zinc-900 flex items-center justify-center px-8 rounded-l-3xl"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="140px" height="140px" viewBox="0 0 232 232" enable-background="new 0 0 232 232" xml:space="preserve"> <rect x="0" y="0" width="232" height="232" fill="#18181b" /><g transform="translate(16,16)"><g transform="translate(72,0) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(80,0) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(104,0) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(128,0) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(80,8) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(104,8) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(112,8) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(120,8) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(128,8) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(64,16) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(72,16) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(128,16) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(64,24) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(80,24) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(96,24) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(104,24) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(64,32) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(96,32) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(104,32) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(128,32) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(64,40) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(80,40) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(104,40) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(112,40) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(120,40) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(128,40) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(64,48) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(80,48) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(96,48) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(112,48) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(128,48) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(64,56) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(80,56) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(96,56) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(0,64) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(16,64) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(24,64) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(32,64) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(40,64) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(48,64) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(72,64) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(80,64) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(88,64) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(96,64) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(104,64) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(112,64) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(120,64) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(128,64) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(144,64) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(152,64) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(160,64) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(168,64) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(176,64) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(8,72) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(16,72) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(24,72) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(32,72) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(56,72) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(64,72) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(96,72) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(128,72) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(152,72) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(184,72) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(0,80) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(8,80) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(24,80) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(48,80) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(56,80) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(72,80) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(80,80) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(88,80) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(104,80) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(120,80) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(136,80) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(160,80) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(168,80) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(184,80) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(192,80) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(8,88) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(32,88) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(56,88) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(64,88) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" height="100"/> </g></g><g transform="translate(88,88) scale(0.08,0.08)"><g transform="" style="fill: rgb(255, 255, 255);"> <rect width="100" heig.........完整代码请登录后点击上方下载按钮下载查看
网友评论0