tailwind布局实现苹果手机iphone15背面效果代码-html代码-BFW代码库

tailwind布局实现苹果手机iphone15背面效果代码

代码语言：html

代码描述：tailwind布局实现苹果手机iphone15背面效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwind.3.2.4.js"></script>
  
</head>


  <body class="w-full flex justify-center p-10 bg-neutral-100">
  <div class="w-[18rem] h-[37rem] bg-gradient-to-b from-blue-100 to-blue-200 border border-blue-300 rounded-[3rem] flex items-center justify-center border-box p-[0.2rem] relative shadow-[1rem_1rem_6rem_rgba(0,0,0,0.2),0_0_0.1rem_rgba(0,0,0,0.4),0_0_0.2rem_rgba(0,0,0,0.8)_inset]">
    <div class="w-1 h-20 rounded-[0_0.1rem_0.1rem_0] bg-gradient-to-l from-neutral-400 via-blue-300 to-blue-300 border-l border-blue-100 absolute -left-1 top-[30%] shadow-[2px_0_1px_rgba(0,0,0,0.2)_inset]"></div>
    <div class="w-1 h-10 rounded-[0_0.1rem_0.1rem_0] bg-gradient-to-r from-neutral-400 via-blue-300 to-blue-300 border-r border-blue-100 absolute -right-1 top-[38%] shadow-[2px_0_1px_rgba(0,0,0,0.2)_inset]"></div>
    <div class="w-1 h-10 rounded-[0_0.1rem_0.1rem_0] bg-gradient-to-r from-neutral-400 via-blue-300 to-blue-300 border-r border-blue-100 absolute -right-1 top-[28%] shadow-[2px_0_1px_rgba(0,0,0,0.2)_inset]"></div>
    <div class="w-1 h-5 rounded-[0_0.1rem_0.1rem_0] bg-gradient-to-r from-neutral-400 via-blue-300 to-blue-300 border-r border-blue-100 absolute -right-1 top-[20%] shadow-[2px_0_1px_rgba(0,0,0,0.2)_inset]"></div>
    
    <div class="absolute h-[99%] w-[98%] border border-blue-900 border-opacity-20 rounded-[2.8rem]">
    </div>
    
    <div class="absolute w-[7rem] h-[7rem] top-[0.8rem] left-[0.8rem] rounded-[2.4rem] shadow-[0.2rem_0.2rem_0.1rem_rgba(255,255,255,0.6)_inset,-0.1rem_-0.1rem_0.1rem_rgba(255,255,255,0.4),0.2rem_0.2rem_0.2rem_rgba(0,0,0,0.05),0rem_0.2rem_0.2rem_rgba(0,0,0,0.05),-0.2rem_-0.2rem_0.2rem_rgba(0,0,0,0.05)_inset] flex items-center justify-center">
      <div class="w-[95%] h-[95%] bg-blue-200 rounded-[2.2rem] shadow-[0.2rem_0.2rem_0.1rem_rgba(0,0,0,0.1)_inset] relative">
        
        <div class="bg-[rgb(30,30,30)] rounded-full w-[47%] h-[47%] absolute top-[0.4rem] left-[0.4rem] border-[0.15rem] border-blue-100 shadow-[0.05rem_0.05rem_0rem_0.05rem_rgba(0,0,0,0.4),0.4rem_0.6rem_0.4rem_rgba(0,0,0,0.2)] flex items-center justify-center">
          <div class="w-[55%] h-[55%] bg-gradient-to-br from-neutral-900 to-neutral-600 rounded-full flex items-center justify-center">
            <div class="w-[50%] h-[50%] bg-gradient-to-tl from-neutral-900 to-neutral-800 rounded-full shadow-[0.05rem_0.05rem_rgba(255,255,255,0.2),0.08rem_0.08rem_0.2rem.........完整代码请登录后点击上方下载按钮下载查看