tailwindcss布局实现个人信息卡片展示交互效果代码-html代码-BFW代码库

tailwindcss布局实现个人信息卡片展示交互效果代码

代码语言：html

代码描述：tailwindcss布局实现个人信息卡片展示交互效果代码

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

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

<head>
  <meta charset="UTF-8">
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.3.js"></script>
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
  
  
  


  
  
</head>

<body translate="no">
  <body class="bg-gradient-to-t from-blue-950 to-blue-900  text-[#101232] flex justify-center items-center min-h-screen">
  <h1 class="sr-only">Glassy Profile</h1>
  <input type="checkbox" id="data" class="sr-only peer/data"  role="switch" aria-label="Data Toggle">
  <input type="checkbox" id="content" class="sr-only peer/content"  role="switch" aria-label="Content Toggle">
  <div class="z-10 rounded-xl overflow-hiddenS group relative
        before:absolute
        before:w-32
        before:aspect-square
        before:rounded-full
        before:bg-blue-600
        before:blur-lg 
        before:right-3
        before:top-0
        before:-z-10

        after:absolute
        after:w-32
        after:aspect-square
        after:rounded-full
        after:bg-teal-300
        after:blur-lg 
        after:left-4
        after:bottom-0
        after:-z-10

        peer-checked/data:first:[&_#toggle-data>span]:scale-0
        peer-checked/data:last:[&_#toggle-data>span]:scale-100

        peer-checked/data:[&_#panel-data]:-translate-y-14
        peer-checked/data:[&_#panel-social]:translate-y-12

        peer-checked/content:[&_#panel-content]:opacity-100
        peer-checked/content:[&_#panel-content]:pointer-events-auto
       ">
    <div class="relative bg-white rounded-xl bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-70 w-60 p-8 text-center">
      <img src="//repo.bfw.wiki/bfwrepo/icon/654cbdf5685d4.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="rounded-full mx-auto w-20 h-20 border-4 border-white/70  opacity-70 group-hover:opacity-100  transition">

      <h3 class="font-bold mt-6">Mary Jane</h3>
      <p class="flex items-center justify-center gap-1 text-sm">
        <span class="material-symbols-outlined text-lg">location_on</span>
        Atlanta, GA
      </p>

      <label for="content" class="block mt-4 cursor-pointer  text-xs rounded-full p-2 px-3 bg-[#101232] text-white transition hover:shadow-xl hover:scale-110">View Content</label>

    </div>

    <label id="toggle-data" for="data" class="grid [grid-template-areas:'stack'] place-content-center absolute top-4 right-4 cursor-pointer hover:scale-150 transition 
            *:[grid-area:stack]
            *:transition-all
            *:duration-300
            *:text-sm
            last:*:scale-0
        ">
      <span class="material-symbols-outlined">density_large</span>
      <span class="material-symbols-outlined">close</span>
    </label>

    <div id="panel-data" class="absolute -top-4 left-8 right-8 w-8/10 h-40  -z-20 bg-[#101232] rounded-t-md text-white p-6 pt-4 transition duration-300">
      <p>UI designer</p>
      <a href="#">@mary</a>
    </div>

    <div id="panel-social" class="absolute transition duration-300 -bottom-4 left-8 right-8 p-6 pb-2 w-8/10 h-20 -z-20 bg-[#101232] text-white rounded-b-md flex items-center justify-between gap-2 [&>svg]:cursor-pointer [&>svg]:w-5 [&>svg]:h-5 [&>svg:hover]:scale-125 [&>svg]:transition">
      <svg viewBox="0 0 24 24&.........完整代码请登录后点击上方下载按钮下载查看