In this section we will create tailwind chat ui, tailwind v3 chat component, tailwind css chat template, responsive chat ui with user list example with Tailwind CSS.
How to install & setup Tailwind CSS v3
Example 1
Tailwind simple chat ui with heroicons icon.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS 3 Simple Chat UI </title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<div class="max-w-2xl border rounded">
<div>
<div class="w-full">
<div class="relative flex items-center p-3 border-b border-gray-300">
<img class="object-cover w-10 h-10 rounded-full"
src="https://cdn.pixabay.com/photo/2018/01/15/07/51/woman-3083383__340.jpg" alt="username" />
<span class="block ml-2 font-bold text-gray-600">Emma</span>
<span class="absolute w-3 h-3 bg-green-600 rounded-full left-10 top-3">
</span>
</div>
<div class="relative w-full p-6 overflow-y-auto h-[40rem]">
<ul class="space-y-2">
<li class="flex justify-start">
<div class="relative max-w-xl px-4 py-2 text-gray-700 rounded shadow">
<span class="block">Hi</span>
</div>
</li>
<li class="flex justify-end">
<div class="relative max-w-xl px-4 py-2 text-gray-700 bg-gray-100 rounded shadow">
<span class="block">Hiiii</span>
</div>
</li>
<li class="flex justify-end">
<div class="relative max-w-xl px-4 py-2 text-gray-700 bg-gray-100 rounded shadow">
<span class="block">how are you?</span>
</div>
</li>
<li class="flex justify-start">
<div class="relative max-w-xl px-4 py-2 text-gray-700 rounded shadow">
<span class="block">Lorem ipsum dolor sit, amet consectetur adipisicing elit. </span>
</div>
</li>
</ul>
</div>
<div class="flex items-center justify-between w-full p-3 border-t border-gray-300">
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
</svg>
</button>
<input type="text" placeholder="Message"
class="block w-full py-2 pl-4 mx-3 bg-gray-100 rounded-full outline-none focus:text-gray-700"
name="message" required />
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
</svg>
</button>
<button type="submit">
<svg class="w-5 h-5 text-gray-500 origin-center transform rotate-90" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor">
<path
d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Example 2
tailwind v3 responsive chat template.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Response Chat Template</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<div class="min-w-full border rounded lg:grid lg:grid-cols-3">
<div class="border-r border-gray-300 lg:col-span-1">
<div class="mx-3 my-3">
<div class="relative text-gray-600">
<span class="absolute inset-y-0 left-0 flex items-center pl-2">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
viewBox="0 0 24 24" class="w-6 h-6 text-gray-300">
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</span>
<input type="search" class="block w-full py-2 pl-10 bg-gray-100 rounded outline-none" name="search"
placeholder="Search" required />
</div>
</div>
<ul class="overflow-auto h-[32rem]">
<h2 class="my-2 mb-2 ml-2 text-lg text-gray-600">Chats</h2>
<li>
<a
class="flex items-center px-3 py-2 text-sm transition duration-150 ease-in-out border-b border-gray-300 cursor-pointer hover:bg-gray-100 focus:outline-none">
<img class="object-cover w-10 h-10 rounded-full"
src="https://cdn.pixabay.com/photo/2018/09/12/12/14/man-3672010__340.jpg" alt="username" />
<div class="w-full pb-2">
<div class="flex justify-between">
<span class="block ml-2 font-semibold text-gray-600">Jhon Don</span>
<span class="block ml-2 text-sm text-gray-600">25 minutes</span>
</div>
<span class="block ml-2 text-sm text-gray-600">bye</span>
</div>
</a>
<a
class="flex items-center px-3 py-2 text-sm transition duration-150 ease-in-out bg-gray-100 border-b border-gray-300 cursor-pointer focus:outline-none">
<img class="object-cover w-10 h-10 rounded-full"
src="https://cdn.pixabay.com/photo/2016/06/15/15/25/loudspeaker-1459128__340.png" alt="username" />
<div class="w-full pb-2">
<div class="flex justify-between">
<span class="block ml-2 font-semibold text-gray-600">Same</span>
<span class="block ml-2 text-sm text-gray-600">50 minutes</span>
</div>
<span class="block ml-2 text-sm text-gray-600">Good night</span>
</div>
</a>
<a
class="flex items-center px-3 py-2 text-sm transition duration-150 ease-in-out border-b border-gray-300 cursor-pointer hover:bg-gray-100 focus:outline-none">
<img class="object-cover w-10 h-10 rounded-full"
src="https://cdn.pixabay.com/photo/2018/01/15/07/51/woman-3083383__340.jpg" alt="username" />
<div class="w-full pb-2">
<div class="flex justify-between">
<span class="block ml-2 font-semibold text-gray-600">Emma</span>
<span class="block ml-2 text-sm text-gray-600">6 hour</span>
</div>
<span class="block ml-2 text-sm text-gray-600">Good Morning</span>
</div>
</a>
</li>
</ul>
</div>
<div class="hidden lg:col-span-2 lg:block">
<div class="w-full">
<div class="relative flex items-center p-3 border-b border-gray-300">
<img class="object-cover w-10 h-10 rounded-full"
src="https://cdn.pixabay.com/photo/2018/01/15/07/51/woman-3083383__340.jpg" alt="username" />
<span class="block ml-2 font-bold text-gray-600">Emma</span>
<span class="absolute w-3 h-3 bg-green-600 rounded-full left-10 top-3">
</span>
</div>
<div class="relative w-full p-6 overflow-y-auto h-[40rem]">
<ul class="space-y-2">
<li class="flex justify-start">
<div class="relative max-w-xl px-4 py-2 text-gray-700 rounded shadow">
<span class="block">Hi</span>
</div>
</li>
<li class="flex justify-end">
<div class="relative max-w-xl px-4 py-2 text-gray-700 bg-gray-100 rounded shadow">
<span class="block">Hiiii</span>
</div>
</li>
<li class="flex justify-end">
<div class="relative max-w-xl px-4 py-2 text-gray-700 bg-gray-100 rounded shadow">
<span class="block">how are you?</span>
</div>
</li>
<li class="flex justify-start">
<div class="relative max-w-xl px-4 py-2 text-gray-700 rounded shadow">
<span class="block">Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</span>
</div>
</li>
</ul>
</div>
<div class="flex items-center justify-between w-full p-3 border-t border-gray-300">
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
</svg>
</button>
<input type="text" placeholder="Message"
class="block w-full py-2 pl-4 mx-3 bg-gray-100 rounded-full outline-none focus:text-gray-700"
name="message" required />
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
</svg>
</button>
<button type="submit">
<svg class="w-5 h-5 text-gray-500 origin-center transform rotate-90" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor">
<path
d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
tailwind css chat template
Example 3
Create a ChatGPT-style chat interface using Tailwind CSS.
<div class="flex h-screen">
<!-- Sidebar -->
<div class="bg-gray-800 text-white w-64 p-4 space-y-4">
<div class="text-xl font-semibold">ChatGPT</div>
<div>
<div class="text-gray-300 text-sm">History</div>
<ul class="space-y-2 mt-3">
<li>Conversation 1</li>
<li>Conversation 2</li>
<!-- More conversations -->
</ul>
</div>
</div>
<!-- Chat Container -->
<div class="flex flex-col flex-1">
<div class="overflow-y-auto p-4 space-y-4 bg-gray-100 flex-1">
<div class="text-right">
<div class="inline-block bg-blue-500 text-white rounded px-4 py-2">
User message
</div>
</div>
<div class="text-left">
<div class="inline-block bg-gray-300 rounded px-4 py-2">
ChatGPT response
</div>
</div>
</div>
<!-- Input Area -->
<div class="p-4 border-t border-gray-200">
<div class="flex gap-4">
<input type="text" class="flex-1 p-2 border border-gray-300 rounded" placeholder="Type your message..." />
<button class="bg-blue-500 text-white rounded px-4 py-2">Send</button>
</div>
</div>
</div>
</div>
tailwind css chatgpt ui chat
See Also
Tailwind CSS Free Digital Agency Landing Page
TailFood – Free Tailwind CSS Restaurant Template
Tailwind CSS Real Estate Template
Tailwind CSS Simple Responsive Landing Page Template
Tailwind CSS Simple Verification Email Template
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
Tailwind CSS Responsive Footer Section Example
Tailwind CSS Background Image Header Example
