tailwind布局实现清爽聊天即时通讯对话ui效果代码
代码语言：html
所属分类：布局界面
代码描述：tailwind布局实现清爽聊天即时通讯对话ui效果代码
代码标签： tailwind 布局 清爽 聊天 即时 通讯 对话 ui
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/uicons-regular-rounded.css">
<style>
::-webkit-scrollbar {
width: .4rem;
height: .4rem;
background-color: transparent;
border-radius: .5rem;
}
::-webkit-scrollbar-thumb {
border-radius: .5rem;
background-color: rgba(14, 0, 23, 0.4);
}
::selection {
background: #7c3aed
;
color: white;
}
</style>
</head>
<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss_3.3.3.js"></script>
<div class="w-screen h-screen flex items-center justify center">
<div
class="container mx-auto h-screen max-h-[800px] flex p-4 gap-2 relative overflow-hidden xl:shadow-2xl xl:rounded-2xl xl:p-4">
<!-- menu nav -->
<nav
class="bg-white flex flex-col justify-between w-16 p-2 h-full shadow-2xl absolute top-0 -left-16 transition duration-300 z-20 sm:w-20 sm:relative sm:left-0 sm:shadow-none"
id="sidebar">
<ul class="w-full flex flex-col gap-1">
<li class="cursor-pointer rounded-lg aspect-square flex justify-center items-center italic">Speak</li>
<li
class="bg-white rounded-lg aspect-square flex flex-col justify-center items-center transition duration-300 border-2 border-violet-500">
<i class="fi fi-rr-comment text-violet-600"></i>
<span class="text-xs font-bold text-violet-600">All chat</span>
</li>
<li
class="bg-white cursor-pointer rounded-lg aspect-square flex flex-col justify-center items-center transition duration-300 group hover:shadow-2xl hover:shadow-violet-500/50 hover:relative active:shadow-inner">
<i class="fi fi-rr-comments transition duration-300 group-hover:text-violet-600"></i>
<span class="text-xs font-bold transition duration-300 group-hover:text-violet-600">Groups</span>
</li>
<li
class="bg-white cursor-pointer rounded-lg aspect-square flex flex-col justify-center items-center transition duration-300 group hover:shadow-2xl hover:shadow-violet-500/50 hover:relative active:shadow-inner">
<i class="fi fi-rr-user transition duration-300 group-hover:text-violet-600"></i>
<span class="text-xs font-bold transition duration-300 group-hover:text-violet-600">Contacts</span>
</li>
<li
class="bg-white cursor-pointer rounded-lg aspect-square flex flex-col justify-center items-center transition duration-300 group hover:shadow-2xl hover:shadow-violet-500/50 hover:relative active:shadow-inner">
<i class="fi fi-rr-settings transition duration-300 group-hover:text-violet-600"></i>
<span class="text-xs font-bold transition duration-300 group-hover:text-violet-600">Settings</span>
</li>
</ul>
<picture
class="cursor-pointer w-full rounded-full aspect-square flex justify-center items-center overflow-hidden p-1 border-violet-400 border-2 transition duration-300 hover:scale-105 active:scale-95">
<img class="rounded-full aspect-square object-cover" src="https://images.unsplash.com/photo-1512646605205-78422b7c7896?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80" alt="avatar">
</picture>
</nav>
<!-- friends and stories -->
<section class="bg-white w-full h-full flex flex-col gap-2 lg:w-2/5 xl:w-1/4">
<form class="flex gap-2 w-full h-[5%]">
<label class="relative bg-violet-50 rounded-lg overflow-hidden h-8 w-full" for="search">
<i class="absolute right-1 shadow-lg shadow-violet-400/50.5 flex h-full items-center fi fi-rr-search"></i>
<input class=" w-11/12 h-full bg-transparent text-sm pl-2 outline-0 focus:text-violet-600" type="search" name="search" id="search" placeholder="search">
</label>
<span class="bg-violet-700 flex w-8 h-8 aspect-square items-center justify-center rounded-lg cursor-pointer transition duration-300 hover:shadow-lg hover:shadow-violet-500/30 sm:hidden" id="open-sidebar">
<i class="fi fi-rr-apps text-white scale-95 flex"></i>
</span>
</form>
<!-- user status -->
<div class=" h-[15%]">
<h3 class="font-bold text-xl">Online now</h3>
<ul class="flex w-full mt-2 justify-between overflow-y-scroll gap-2 pb-2" id="stories">
<li class="cursor-pointer">
<picture class="relative flex h-12 aspect-square">
<img class="h-full w-full object-cover block rounded-full" src="https://images.unsplash.com/photo-1533461502717-83546f485d24?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8bmVvbiUyMGdpcmx8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" alt="user">
<b class="bg-pink-700 h-3.5 border-2 border-white shadow-lg shadow-pink-500 aspect-square block rounded-full absolute right-0 bottom-0"></b>
</picture>
</li>
<li class="cursor-pointer">
<picture class="relative flex h-12 aspect-square">
<img class="h-full w-full object-cover block rounded-full" src="https://images.unsplash.com/photo-1617922304319-48eba6011532?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fG5lb24lMjBnaXJsfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="user">
<b class="bg-lime-400 h-3.5 border-2 border-white shadow-lg shadow-lime-400 aspect-square block rounded-full absolute right-0 bottom-0"></b>
</picture>
</li>
<li class="cursor-pointer">
<picture class="relative flex h-12 aspect-square">
<img class="h-full w-full object-cover block rounded-full" src="https://images.unsplash.com/photo-1623410357648-232db562177b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fG5lb24lMjBnaXJsfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="user">
<b class="bg-lime-400 h-3.5 border-2 border-white shadow-lg shadow-lime-500 aspect-square block rounded-full absolute right-0 bottom-0"></b>
</picture>
</li>
<li class="cursor-pointer">
<picture class="relative flex h-12 aspect-square">
<img class="h-full w-full object-cover block rounded-full" src="https://images.unsplash.com/photo-1618984481178-08fb47c721ae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fG5lb24lMjBnaXJsfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="user">
<b class="bg-pink-700 h-3.5 border-2 border-white shadow-lg shadow-pink-500 aspect-square block rounded-full absolute right-0 bottom-0"></b>
</picture>
</li>
<li class="cursor-pointer">
<picture class="relative flex h-12 aspect-square">
<img class="h-full w-full object-cover block rounded-full" src="https://images.unsplash.com/photo-1496440737103-cd596325d314?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Z2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" alt="user">
<b class="bg-pink-700 h-3.5 border-2 border-white shadow-lg shadow-pink-500 aspect-square block rounded-full absolute right-0 bottom-0"></b>
</picture>
</li>
<li class="cursor-pointer">
<picture class="relative flex h-12 aspect-square">
<img class="h-full w-full object-cover block rounded-full" src="https://images.unsplash.com/photo-16.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0