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-1604004555489-723a93d6ce74?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8Z2lybHxlbnwwfHwwfHw%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-1484399172022-72a90b12e3c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fGdpcmx8ZW58MHx8MHx8&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-1438109491414-7198515b166b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjZ8fGdpcmx8ZW58MHx8MHx8&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-1601288496920-b6154fe3626a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzV8fGdpcmx8ZW58MHx8MHx8&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-1530021232320-687d8e3dba54?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzN8fGdpcmx8ZW58MHx8MHx8&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>
</ul>
</div>
<!-- messages -->
<div class=" h-[80%]">
<h3 class="font-bold text-xl">Messages</h3>
<ul class="mt-2 flex flex-col gap-1 overflow-y-scroll h-[90%]" id="messages-list">
<li
class="flex relative items-center gap-2 cursor-pointer bg-white p-2 rounded-xl transition duration-300 relative hover:shadow-3xl hover:z-10 active:shadow-inner">
<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>
<div class="">
<header class="text-sm font-bold">Suneo Marinir</header>
<div class="text-sm flex w-full gap-2">
<p class="max-w-[70%] overflow-hidden whitespace-nowrap text-ellipsis"> Lorem, ipsum dolor</p>
<time class="text-violet-600 text-xs whitespace-nowrap">20h ago</time>
</div>
</div>
<b class="absolute text-xs h-6 aspect-square flex items-center justify-center text-white bg-violet-700 rounded-full right-1 shadow-lg shadow-violet-400/50">2</b>
</li>
<li
class="flex relative items-center gap-2 cursor-pointer bg-white p-2 rounded-xl transition duration-300 relative hover:shadow-3xl hover:z-10 active:shadow-inner">
<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-400 aspect-square block rounded-full absolute right-0 bottom-0"></b>
</picture>
<div class="">
<header class="text-sm font-bold">Suneo Marinir</header>
<div class="text-sm flex w-full gap-2">
<p class="max-w-[70%] overflow-hidden whitespace-nowrap text-ellipsis"> Lorem, ipsum dolor</p>
<time class="text-violet-600 text-xs whitespace-nowrap">20h ago</time>
</div>
</div>
<b class="absolute text-xs h-6 aspect-square flex items-center justify-center text-white bg-violet-700 rounded-full right-1 shadow-lg shadow-violet-400/50">2</b>
</li>
<li
class="flex relative items-center gap-2 cursor-pointer bg-white p-2 rounded-xl transition duration-300 relative hover:shadow-3xl hover:z-10 active:shadow-inner">
<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-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>
<div class="">
<header class="text-sm font-bold">Suneo Marinir</header>
<div class="text-sm flex w-full gap-2">
<p class="max-w-[70%] overflow-hidden whitespace-nowrap text-ellipsis"> Lorem, ipsum dolor</p>
<time class="text-violet-600 text-xs whitespace-nowrap">20h ago</time>
</div>
</div>
<b class="absolute text-xs h-6 aspect-square flex items-center justify-center text-white bg-violet-700 rounded-full right-1 shadow-lg shadow-violet-400/50">2</b>
</li>
<li
class="flex relative items-center gap-2 cursor-pointer bg-white p-2 rounded-xl transition duration-300 relative hover:shadow-3xl hover:z-10 active:shadow-inner">
<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-1612194196050-d1a82e4b9b0d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDh8fG5lb24lMjBnaXJsfGVufDB8fDB8fA%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>
<div class="">
<header class="text-sm font-bold">Suneo Marinir</header>
<div class="text-sm flex w-full gap-2">
<p class="max-w-[70%] overflow-hidden whitespace-nowrap text-ellipsis"> Lorem, ipsum dolor</p>
<time class="text-violet-600 text-xs whitespace-nowrap">20h ago</time>
</div>
</div>
</li>
<li
class="flex relative items-center gap-2 cursor-pointer bg-white p-2 rounded-xl transition duration-300 relative hover:shadow-3xl hover:z-10 active:shadow-inner">
<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>
<div class="">
<header class="text-sm font-bold">Suneo Marinir</header>
<div class="text-sm flex w-full gap-2">
<p class="max-w-[70%] overflow-hidden whitespace-nowrap text-ellipsis"> Lorem, ipsum dolor</p>
<time class="text-violet-600 text-xs whitespace-nowrap">20h ago</time>
</div>
</div>
</li>
<li
class="flex relative items-center gap-2 cursor-pointer bg-white p-2 rounded-xl transition duration-300 relative hover:shadow-3xl hover:z-10 active:shadow-inner">
<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-1559828801-04565cd31e27?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjF8fG5lb24lMjBnaXJsfGVufDB8fDB8fA%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>
<div class="">
<header class="text-sm font-bold">Suneo Marinir</header>
<div class="text-sm flex w-full gap-2">
<p class="max-w-[70%] overflow-hidden whitespace-nowrap text-ellipsis"> Lorem, ipsum dolor</p>
<time class="text-violet-600 text-xs whitespace-nowrap">20h ago</time>
</div>
</div>
</li>
<li
class="flex relative items-center gap-2 cursor-pointer bg-white p-2 rounded-xl transition duration-300 relative hover:shadow-3xl hover:z-10 active:shadow-inner">
<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-1587930658880-481927aafb00?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8NHwxNTEyMDEzM3x8ZW58MHx8fHw%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>
<div class="">
<header class="text-sm font-bold">Suneo Marinir</header>
<div class="text-sm flex w-full gap-2">
<p class="max-w-[70%] overflow-hidden whitespace-nowrap text-ellipsis"> Lorem, ipsum dolor</p>
<time class="text-violet-600 text-xs whitespace-nowrap">20h ago</time>
</div>
</div>
<b class="absolute text-xs h-6 aspect-square flex items-center justify-center text-white bg-violet-700 rounded-full right-1 shadow-lg shadow-violet-400/50">2</b>
</li>
<li
class="flex relative items-center gap-2 cursor-pointer bg-white p-2 rounded-xl transition duration-300 relative hover:shadow-3xl hover:z-10 active:shadow-inner">
<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-1514888286974-6c03e2ca1dba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2F0fGVufDB8fDB8fA%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>
<div class="">
<header class="text-sm font-bold">Suneo Marinir</header>
<div class="text-sm flex w-full gap-2">
<p class="max-w-[70%] overflow-hidden whitespace-nowrap text-ellipsis"> Lorem, ipsum dolor</p>
<time class="text-violet-600 text-xs whitespace-nowrap">20h ago</time>
</div>
</div>
<b class="absolute text-xs h-6 aspect-square flex items-center justify-center text-white bg-violet-700 rounded-full right-1 shadow-lg shadow-violet-400/50">2</b>
</li>
</ul>
</div>
</section>
<!-- chat -->
<section
class=" w-full absolute z-20 bg-white h-full left-0 top-0 p-2 overflow-hidden lg:block lg:relative lg:w-3/5 xl:w-2/4"
id="chat">
<header class="flex justify-between px-2 md:px-4 lg:px-6">
<div class="flex gap-2 items-center">
<span class="my-auto cursor-pointer lg:hidden" id="close-chat">
<i class="fi fi-rr-angle-small-left flex bg-violet-200 p-2 rounded-lg text-violet-700 transition duration-500 hover:bg-white hover:shadow-xl active:shadow-inner"></i>
</span>
<picture class="relative flex h-8 aspect-square cursor-pointer sm:h-12" id="open-detail">
<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-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>
<div class="text-sm">
<h2 class="font-bold whitespace-nowrap">Suneo Marinir</h2>
<p class="text-xs">10 min ago</p>
</div>
</div>
<div class="flex gap-2 sm:gap-4">
<span class="my-auto cursor-pointer">
<i class="fi fi-rr-phone-call flex bg-violet-200 p-2 rounded-lg text-violet-700 transition duration-500 hover:bg-white hover:shadow-xl active:shadow-inner"></i>
</span>
<span class="my-auto cursor-pointer">
<i class="fi fi-rr-video-camera flex bg-violet-200 p-2 rounded-lg text-violet-700 transition duration-500 hover:bg-white hover:shadow-xl active:shadow-inner"></i>
</span>
<span class="my-auto cursor-pointer">
<i class="fi fi-rr-gallery flex bg-violet-200 p-2 rounded-lg text-violet-700 transition duration-500 hover:bg-white hover:shadow-xl active:shadow-inner"></i>
</span>
</div>
</header>
<main class="bg-gray-100 w-full h-full mt-4 p-2 !pr-2 rounded-2xl md:p-4 lg:p-6">
<div class="w-full h-[90%] relative">
<head.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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