tailwind实现大气自适应登录页面表单效果代码-html代码-BFW代码库

tailwind实现大气自适应登录页面表单效果代码

代码语言：html

代码描述：tailwind实现大气自适应登录页面表单效果代码

下面为部分代码预览，完整代码请点击下载或在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>

</head>
<body>

<body class="bg-rose-500 flex justify-center items-center min-h-screen px-4 bg-[radial-gradient(at_center_bottom,#AD2B7B,#057AFD)]">

  <main class="bg-black/40 text-white backdrop-blur-lg p-6 sm:p-12 space-y-3 shadow-lg rounded-xl w-full max-w-sm relative
     [&>div]:transition-all
     [&>div]:duration-300

     [&_label]:cursor-pointer
     [&_label]:transition-all 
     [&_label]:duration-300
     hover:[&_label]:text-pink-500
     hover:[&_:not(.field)>label]:underline

     [&_a]:text-indigo-600
     [&_a]:hover:text-indigo-800
     [&_a]:transition
  ">

    <input type="radio" id="radio-1" name="panel-toggle" class="sr-only peer/radio-1" checked>
    <input type="radio" id="radio-2" name="panel-toggle" class="sr-only peer/radio-2">
    <input type="radio" id="radio-3" name="panel-toggle" class="sr-only peer/radio-3">

    <h1 class="font-bold text-lg grid [grid-template-areas:'stack']
        *:[grid-area:stack]
        *:transition-transform
        *:duration-300
        *:scale-0
        *:origin-left
                
        peer-checked/radio-1:[&>span:nth-child(1)]:scale-100
        peer-checked/radio-2:[&>span:nth-child(2)]:scale-100
        peer-checked/radio-3:[&>span:nth-child(3)]:scale-100
    ">
      <span>Sign In</span>
      <span>Sign Up</span>
      <span>Password Reminder</span>

    </h1>

    <div class="grid
       *:overflow-hidden 
       
       [&_label]:text-slate-400
       [&_label]:font-thin
       [&_label]:text-xs
       
       [&_input]:rounded-md
       [&_input]:bg-black/30
       [&_input]:py-3
       [&_input]:px-5
       [&_input]:w-full
       [&_input]:transition-all
       [&_input]:duration-300
       [&_input]:border-none
       [&_input]:outline-none
       [&_input]:ring-0
       focus-visible:[&_input]:bg-black/60
       
       [&_button]:py-2
       [&_button]:px-4
       [&_button]:text-sm
       [&_button]:rounded-md
       [&_button]:text-white
       [&_button]:relative
       [&_button]:isolate
       [&_button]:whitespace-nowrap
       [&_button]:overflow-hidden
       [&_button]:border-none
       [&_button]:outline-none
       [&_button]:ring-0
       [&_button]:bg-sky-600/90
       [&_button]:scale-0
       [&_button]:transition-all
       [&_button]:duration-300
       [&_button]:origin-left
       before:[&_button]:absolute
       before:[&_button]:inset-[0_50%_0_50%]
       before:[&_button]:-z-10
       before:[&_button]:transition-all
       before:[&_button]:duration-300
       before:[&_button]:ease-out
       before:[&_bu.........完整代码请登录后点击上方下载按钮下载查看