Skip to content

Instantly share code, notes, and snippets.

@rg3915

rg3915/chat.html

Last active July 22, 2023 09:30
Show Gist options
  • Save rg3915/28c0cdd92baa191e08d9946861f22129 to your computer and use it in GitHub Desktop.
Save rg3915/28c0cdd92baa191e08d9946861f22129 to your computer and use it in GitHub Desktop.
Download ZIP
chat tailwindCSS
Raw
chat.html
<div class="fixed bottom-4 right-8 border border-gray-200 rounded-lg shadow-md">
<div class="container mx-auto">
<!-- Chat container -->
<div class="container mx-auto">
<!-- Flex container -->
<div class="flex">
<!-- First div -->
<div class="w-1/2 p-4">
<!-- lista de contatos -->
<div class="container mx-auto p-4">
<!-- Contact list -->
<ul class="divide-y divide-gray-300">
<!-- Contact item -->
<li class="flex items-center py-2">
<div class="ml-9 px-4 py-3 bg-blue-400 rounded-lg">
<p class="font-semibold">Todos</p>
</div>
</li>
<li class="flex items-center py-2">
<div class="w-7 h-7 rounded-full overflow-hidden">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Idris_Elba-4580_%28cropped%29.jpg/250px-Idris_Elba-4580_%28cropped%29.jpg"
alt="Profile"
class="object-cover w-full h-full"
>
</div>
<div>
<div class="ml-3">
<p class="font-semibold">Idris Elba</p>
</div>
</li>
<!-- Another contact item -->
<li class="flex items-center py-2">
<div class="w-7 h-7 rounded-full overflow-hidden">
<img
src="https://i2-prod.bristolpost.co.uk/news/bristol-news/article3942205.ece/ALTERNATES/s1200c/0_JS206725625.jpg"
alt="Profile"
class="object-cover w-full h-full"
>
</div>
<div>
<img
src=""
alt=""
>
</div>
<div class="ml-4">
<p class="font-semibold">Annie Mac</p>
</div>
</li>
<!-- Another contact item -->
<li class="flex items-center py-2">
<div class="w-7 h-7 rounded-full overflow-hidden">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2tcjXam-g5z9RSCeYhkv0PxAJ0yBgfmkXgcjMBm-rEGXOHRyroLY0FPtt44Xj1YT8y9A&usqp=CAU"
alt="Profile"
class="object-cover w-full h-full"
>
</div>
<div>
<div class="ml-4">
<p class="font-semibold">Green Velvet</p>
</div>
</li>
<!-- Another contact item -->
<li class="flex items-center py-2">
<div class="w-7 h-7 rounded-full overflow-hidden">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2ww7ktQ1fgf49qNUF1ow9nViyyAVUa4R07A&usqp=CAU"
alt="Profile"
class="object-cover w-full h-full"
>
</div>
<div>
<div class="ml-4">
<p class="font-semibold">Norman Cook</p>
</div>
</li>
<!-- Add more contact items as needed -->
</ul>
</div>
</div>
<!-- Second div -->
<div class="w-96 p-4">
<div class="bg-white shadow-md border rounded-lg max-w-md mx-auto">
<!-- Messages -->
<div class="p-4 space-y-4">
<!-- Message bubble -->
<div class="flex space-x-2 items-start">
<div class="w-7 h-7 rounded-full overflow-hidden">
<img
src="https://i2-prod.bristolpost.co.uk/news/bristol-news/article3942205.ece/ALTERNATES/s1200c/0_JS206725625.jpg"
alt="Profile"
class="object-cover w-full h-full"
>
</div>
<div class="flex-1 bg-blue-400 text-white p-2 rounded-lg">
<p>E ai, tudo certo pra Ibiza?</p>
</div>
</div>
<!-- Another message bubble -->
<div class="flex space-x-2 items-start">
<div class="flex-1 bg-green-300 p-2 rounded-lg">
<p>Quase, eu não sei onde foi parar meu disco do Bob Sinclar.</p>
</div>
<div class="w-7 h-7 rounded-full overflow-hidden">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2tcjXam-g5z9RSCeYhkv0PxAJ0yBgfmkXgcjMBm-rEGXOHRyroLY0FPtt44Xj1YT8y9A&usqp=CAU"
alt="Profile"
class="object-cover w-full h-full"
>
</div>
</div>
<!-- Add more message bubbles as needed -->
<div class="flex space-x-2 items-start">
<div class="w-7 h-7 rounded-full overflow-hidden">
<img
src="https://i2-prod.bristolpost.co.uk/news/bristol-news/article3942205.ece/ALTERNATES/s1200c/0_JS206725625.jpg"
alt="Profile"
class="object-cover w-full h-full"
>
</div>
<div class="flex-1 bg-blue-400 text-white p-2 rounded-lg">
<p>Desde quando você gosta de Bob Sinclar?
</p>
</div>
</div>
<!-- message buble -->
<div class="flex space-x-2 items-start">
<div class="w-7 h-7 rounded-full overflow-hidden">
<img
src="https://i2-prod.bristolpost.co.uk/news/bristol-news/article3942205.ece/ALTERNATES/s1200c/0_JS206725625.jpg"
alt="Profile"
class="object-cover w-full h-full"
>
</div>
<div class="flex-1 bg-blue-400 text-white p-2 rounded-lg">
<p>Achei que seu estilo era só La La Land.</p>
</div>
</div>
<!-- Another message bubble -->
<div class="flex space-x-2 items-start">
<div class="flex-1 bg-green-300 p-2 rounded-lg">
<p>kkk, eu sou tão eclético quanto você.</p>
</div>
<div class="w-7 h-7 rounded-full overflow-hidden">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2tcjXam-g5z9RSCeYhkv0PxAJ0yBgfmkXgcjMBm-rEGXOHRyroLY0FPtt44Xj1YT8y9A&usqp=CAU"
alt="Profile"
class="object-cover w-full h-full"
>
</div>
</div>
</div>
<!-- Input box -->
<div class="p-4 border-t border-gray-300 flex">
<input
type="text"
class="flex-1 px-3 py-2 rounded-lg border border-gray-300"
placeholder="Digite sua mensagem..."
>
<button class="w-10 h-10 ml-2 px-2 py-4 bg-blue-500 text-white rounded-full flex items-center">
<i class="mx-auto">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-send-horizonal"
>
<path d="m3 3 3 9-3 9 19-9Z" />
<path d="M6 12h16" /></svg>
</i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment