tailwind+chart实现手机仪表盘数据统计图表代码-html代码-BFW代码库

tailwind+chart实现手机仪表盘数据统计图表代码

代码语言：html

代码描述：tailwind+chart实现手机仪表盘数据统计图表代码

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

<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chart.3.7.1.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet">
<script>
tailwind.config = {
  theme: {
    extend: {
      fontFamily: { sans: ['Inter','ui-sans-serif','system-ui'] }
    }
  }
}
</script>
  <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="min-h-screen flex items-center justify-center bg-gray-100 pt-8 pr-8 pb-8 pl-8">

<!-- Clay Mobile Frame -->
<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]">
  
  <!-- Mobile Screen -->
  <div class="bg-white rounded-[46px] w-full h-full overflow-hidden">
    
    <!-- Status Bar -->
    

    <!-- Dashboard Content -->
    <div class="h-full pb-8 overflow-y-auto">
      
      <!-- Header -->
      <div class="text-white bg-gradient-to-tr from-teal-400 to-blue-500 pt-8 pr-6 pb-8 pl-6">
        <div class="flex items-center justify-between mb-6">
          <div class="">
            <h1 class="text-2xl font-semibold mb-1">.........完整代码请登录后点击上方下载按钮下载查看