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,.........完整代码请登录后点击上方下载按钮下载查看