tailwind布局一个手机未接电话ui交互效果代码-html代码-BFW代码库

tailwind布局一个手机未接电话ui交互效果代码

代码语言：html

代码描述：tailwind布局一个手机未接电话ui交互效果代码，无js代码，点击未接电话展开详情。

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

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

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




<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss_3.3.3.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />


  
  
</head>

<body >
  <body class="bg-gradient-to-t from-violet-400 via-rose-200 to-indigo-200 flex justify-center items-center min-h-screen">
    
         <div id="device" class=" bg-zinc-100  h-[600px]  rounded-[2.5rem]  w-full max-w-xs relative  isolate text-black border-8 border-black outline outline-white/50 outline-1 shadow-xl ring-2 ring-black/5 
            before:bg-[url(//repo.bfw.wiki/bfwrepo/image/5e323253cf4d2.png)]
            before:inset-0
            before:absolute
            before:opacity-50
            before:bg-cover
            before:bg-center
            before:bg-no-repeat
            before:-z-10 
            before:rounded-[2rem]  
         ">
            <!-- side buttons (to improve) -->
            <div class="absolute h-12 w-1 bg-zinc-900 -left-3 top-24 rounded-l-md border-r border-white/30"></div>
            <div class="absolute h-12 w-1 bg-zinc-900 -left-3 top-40 rounded-l-md border-r border-white/30"></div>
            <div class="absolute h-20 w-1 bg-zinc-900 -right-3 top-28 rounded-r-md border-l border-white/30"></div>
            
            <!-- top icons -->
            <header class="grid grid-cols-3 gap-1 items-center text-xs py-2 px-3">
                <div class="flex items-center gap-1">12:37 pm</div>
                <div class="mx-auto relative rounded-full bg-black py-2 w-24 px-3 flex items-center">
                    <div class="lens bg-[#080928] shadow-inner shadow-indigo-600  ml-auto size-3 rounded-full"></div>
                </div>
                <div class="flex items-center gap-1">
                    <span class="material-symbols-outlined ml-auto text-base">bluetooth</span>
                    <span class="material-symbols-outlined text-base">signal_cellular_alt</span>
                    <span class="material-symbols-outlined text-base">wifi</span>
                    <span class="material-symbols-outlined rotate-180  text-base">battery_horiz_.........完整代码请登录后点击上方下载按钮下载查看