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.25),0_30px_60px_-30px_rgba(0,0,0,0.3),inset_0_-2px_6px_0_rgba(10,37,64,0.35)] bg-[#f6f9fc] p-2 w-[375px] h-[812px]">
  <div class="phone-screen py-8">
    
    <!-- Mobile Header -->
    <div class="sticky top-0 z-10 bg-white/95 border-gray-200 border-b pt-3 pr-4 pb-3 pl-4 backdrop-blur-sm">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="mountain" class="lucide lucide-mountain lucide-locate-fixed w-[20px] h-[20px]" style="color: rgb(0, 0, 0);"><path d="m8 3 4 8 5-5 5 15H2L8 3z">.........完整代码请登录后点击上方下载按钮下载查看