tailwindcss实现一个简洁的登录表单代码
代码语言:html
所属分类:表单美化
代码描述:tailwindcss实现一个简洁的登录表单代码
代码标签: tailwind css实 简洁 登录 表单 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入 Tailwind CSS --> <script src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.browser@4.js"></script> <!-- 引入 Font Awesome 图标库 --> <link rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.7.0.css"> <style> body { margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f5f7fa; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .login-container { width: 100%; max-width: 400px; background-color: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; transition: all 0.3s ease; } .login-container:hover { box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); } .login-header { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; padding: 30px; text-align: center; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0