tailwindcss实现旅行飞行app的ui原型图代码-html代码-BFW代码库

代码语言：html

代码描述：tailwindcss实现旅行飞行app的ui原型图代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Geist font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <!-- TailwindCSS CDN -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
    <!-- Lucide Icons -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lucide.min.js"></script>
    <style>
        :root { font-family: 'Geist', system-ui, sans-serif; }
        .mobile-screen { width: 320px; height: 640px; }
        .beautiful-shadow {
        box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.06), 0px 1px 1px -0.5px rgba(0,0,0,0.06), 0px 3px 3px -1.5px rgba(0,0,0,0.06), 0px 6px 6px -3px rgba(0,0,0,0.06), 0px 12px 12px -6px rgba(0,0,0,0.06), 0px 24px 24px -12px rgba(0,0,0,0.06);
        }
        .scroll-hide::-webkit-scrollbar { display: none; }
        .scroll-hide { -ms-overflow-style: none; scrollbar-width: none; }
    </style>
    <link id="all-fonts-link-font-roboto" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&amp;display=swap">
    <style id="all-fonts-style-font-roboto">
        .font-roboto { font-family: 'Roboto', sans-serif !important; }
    </style>
    <link id="all-fonts-link-font-montserrat" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&amp;display=swap">
    <style id="all-fonts-style-font-montserrat">
        .font-montserrat { font-family: 'Montserrat', sans-serif !important; }
    </style>
    <link id="all-fonts-link-font-poppins" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap">
    <style id="all-fonts-style-font-poppins">
        .font-poppins { font-family: 'Poppins', sans-serif !important; }
    </style>
    <link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&amp;display=swap">
    <style id="all-fonts-style-font-playfair">
        .font-playfair { font-family: 'Playfair Display', serif !important; }
    </style>
    <link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&amp;display=swap">
    <style id="all-fonts-style-font-instrument-serif">
        .font-instrument-serif { font-family: 'Instrument Serif', serif !important; }
    </style>
    <link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&amp;display=swap">
    <style id="all-fonts-style-font-merriweather">
        .font-merriweather { font-family: 'Merriweather', serif !important; }
    </style>
    <link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&amp;display=swap">
    <style id="all-fonts-style-font-bricolage">
        .font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }
    </style>
    <link id="all-fonts-link-font-jakarta" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&amp;display=swap">
    <style id="all-fonts-style-font-jakarta">
        .font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }
    </style>
    <link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&amp;display=swap">
    <style id="all-fonts-style-font-manrope">
        .font-manrope { font-family: 'Manrope', sans-serif !important; }
    </style>
    <link id="all-fonts-link-font-space-grotesk" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;display=swap">
    <style id="all-fonts-style-font-space-grotesk">
        .font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }
    </style>
    <link id="all-fonts-link-font-work-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&amp;display=swap">
    <style id="all-fonts-style-font-work-sans">
        .font-work-sans { font-family: 'Work Sans', sans-serif !important; }
    </style>
    <link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&amp;display=swap">
    <style id="all-fonts-style-font-pt-serif">
        .font-pt-serif { font-family: 'PT Serif', serif !important; }
    </style>
    <link id="all-fonts-link-font-geist-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&amp;display=swap">
    <style id="all-fonts-style-font-geist-mono">
        .font-geist-mono { font-family: 'Geist Mono', monospace !important; }
    </style>
    <link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&amp;display=swap">
    <style id="all-fonts-style-font-space-mono">
        .font-space-mono { font-family: 'Space Mono', monospace !important; }
    <.........完整代码请登录后点击上方下载按钮下载查看