tailwind布局实现运动健身跑步类app的ui设计代码-html代码-BFW代码库

tailwind布局实现运动健身跑步类app的ui设计代码

代码语言：html

代码描述：tailwind布局实现运动健身跑步类app的ui设计代码

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

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

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" rel="stylesheet">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<script>
tailwind.config = {
  theme: {
    extend: {
      fontFamily: { sans: ['Inter','ui-sans-serif','system-ui'] },
      colors: { brand:'#000000' },
      borderRadius: { '54': '54px' }
    }
  }
}
</script>
<style>
.phone-screen {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 46px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
</style>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;family=IBM+Plex+Serif:wght@300;400;500;600;700&amp;family=IBM+Plex+Mono:wght@300;400;500;600;700&amp;family=Inter&amp;display=swap" rel="stylesheet">
</head>
<body class="antialiased flex items-center justify-center min-h-screen bg-gray-100 pt-8 pr-8 pb-8 pl-8">

<div class="rounded-[54px] shadow-[0_50px_100px_-20px_rgba(50,50,93,0.........完整代码请登录后点击上方下载按钮下载查看