tailwind布局实现带二维码飞机票火车票效果代码

代码语言:html

所属分类:布局界面

代码描述:tailwind布局实现带二维码飞机票火车票效果代码,包含黑白二色。

代码标签: 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