tailwind实现一个自适应简洁登录表单页面代码-html代码-BFW代码库

tailwind实现一个自适应简洁登录表单页面代码

代码语言：html

代码描述：tailwind实现一个自适应简洁登录表单页面代码

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

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.2.2.7.css">
    <style>
        .dlbox .weixin, .dlbox .weibo {
            display: inline-block;
            width: 32px;
            height: 32px;
            background-size: cover;
        }

        .dlbox .weixin {
            background-image: url(//repo.bfw.wiki/bfwrepo/icon/600048614f343.png);
        }

        .dlbox .weibo {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60cc69a684191.png);
        }
		.bg-indigo-100 {
    background-color: #ebf4ff;
}.border-gray-200 {
    border-color: #edf2f7;
}.bg-gray-100 {
    background-color: #f7fafc;
}.bg-indigo-500 {
    background-color: #667eea;
}
    </style>
</head>

<body class="min-h-screen bg-gray-100 text-gray-900 flex justify-center dlbox">
    <div class="max-w-screen-xl m-0 sm:m-20 bg-white shadow sm:rounded-lg flex justify-center flex-1">
        <div class="lg:w-1/2 xl:w-5/12 p-6 sm:p-12">
            <div class="mt-12 flex flex-col items-center">
                <h1 class="text-2xl xl:text-3xl font-extrabold">用户登录</h1>
                <div class="w-full flex-1 mt-8">





                    <div class="mx-auto max-w-xs">
                        <input class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white" type="email" placeholder="电子邮箱" value="admin@qq.com">
                        <input class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5" type="password" placeholder="密码">
                        <button class="mt-5 tracking-wide font.........完整代码请登录后点击上方下载按钮下载查看