tailwind布局实现冥想睡眠类app的ui设计代码-html代码-BFW代码库

tailwind布局实现冥想睡眠类app的ui设计代码

代码语言：html

代码描述：tailwind布局实现冥想睡眠类app的ui设计代码

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Serene - Meditation App</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
</head>
<body class="bg-gray-100 flex justify-center items-center min-h-screen p-4">
  <div id="phone-container" class="perspective-container relative w-[375px] h-[812px] transition-transform duration-200 ease-out">
    <!-- iPhone Frame -->
    <div class="relative w-full h-full bg-white rounded-[54px] overflow-hidden shadow-2xl border-8 border-gray-100">
      <!-- Dynamic Island -->
      <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-[126px] h-[34px] bg-black rounded-b-[18px] z-20"></div>
      
      <!-- Status Bar -->
      <div class="pt-12 px-6 flex justify-between items-center text-sm">
        <div class="text-gray-800 font-medium">9:41</div>
        <div class="flex space-x-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" />
          </svg>
          <div class="w-6 h-4 bg-gray-800 rounded-sm relative">
            <div class="absolute top-0.5 left-0.5 w-5 h-3 bg-white rounded-sm"></div>
          </div>
        </div>
      </div>

      <!-- App Content -->
      <div class="px-6 pt-6">
        <div class="flex justify-between items-center">
          <h1 class="text-2xl font-semibold text-gray-900">Serene</h1>
          <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z.........完整代码请登录后点击上方下载按钮下载查看