tailwind实现一个pc端微信聊天即时通讯ui代码-html代码-BFW代码库

tailwind实现一个pc端微信聊天即时通讯ui代码

代码语言：html

代码描述：tailwind实现一个pc端微信聊天即时通讯ui代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>即时通讯社交App</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
</head>
<body class="bg-gray-100">
    <div class="flex h-screen">
        <!-- 侧边栏 -->
        <div class="w-20 bg-indigo-600 text-white flex flex-col items-center py-4 space-y-8">
            <div class="w-12 h-12 rounded-full bg-white text-indigo-600 flex items-center justify-center font-bold text-xl">IM</div>
            <div class="space-y-6">
                <button class="w-12 h-12 rounded-full bg-indigo-700 flex items-center justify-center">
                    <i class="fas fa-comment-alt text-xl"></i>
                </button>
                <button class="w-12 h-12 rounded-full flex items-center justify-center hover:bg-indigo-700">
                    <i class="fas fa-user-friends text-xl"></i>
                </button>
                <button class="w-12 h-12 rounded-full flex items-center justify-center hover:bg-indigo-700">
                    <i class="fas fa-phone-alt text-xl"></i>
                </button>
                <button class="w-12 h-12 rounded-full flex items-center justify-center hover:bg-indigo-700">
                    <i class="fas fa-cog text-xl"></i>
                </button>
            </div>
            <div class="mt-auto">
                <div class="w-10 h-10 rounded-full bg-gray-200 border-2 border-dashed"></div>
            </div>
        </div>
        <!-- 联系人列表 -->
        <div class="w-80 bg-white border-r border-gray-200 flex flex-col">
            <div c.........完整代码请登录后点击上方下载按钮下载查看