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