Home
Ayyamperumal S
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface

Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface

A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components.

Key features:

Responsive layout with mobile support

Floating input bar with auto-expanding textarea

Tailwind-powered message bubbles with clear sender roles

Modern dark theme with subtle gradients and shadows

Easily extendable to real AI APIs (e.g., OpenAI)

This tailwind example is contributed by Ayyamperumal S, on 11-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are loading, loader,Front page,upcoming, Pre-launch page, Teaser page, Under construction page, Placeholder page, Sneak peek page,Launch page

Avatar Breadcrumb Hero Spinner / Loading Comment Section Other Gradient Landing Page Coming Soon Page

Author Ayyamperumal S

200

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>AI Chat – Polished UI</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Inter:wght@400;600&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Inter', sans-serif;
    }

.chat-scroll {
      max-height: 500px;
      overflow-y: auto;
      scroll-behavior: smooth;
    }

.spinner {
      border: 4px solid rgba(255, 255, 255, 0.2);
      border-top: 4px solid white;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      animation: spin 1s linear infinite;
    }

@keyframes spin {
      to { transform: rotate(360deg); }
    }
  </style>
</head>
<body class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 min-h-screen p-4 flex items-center justify-center text-white">

<ai-chat-box></ai-chat-box>

function generateMockAIResponse(input) {
      return generalResponses[Math.floor(Math.random() * generalResponses.length)];
    }

class AIChatBox extends HTMLElement {
      constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });

shadow.innerHTML = `
          <div class="w-full max-w-3xl bg-white/5 backdrop-blur-lg rounded-2xl border border-white/10 shadow-xl p-6 flex flex-col space-y-6">
            <h1 class="text-2xl font-bold text-center bg-gradient-to-r from-teal-400 to-blue-500 text-transparent bg-clip-text">Ask AI 🤖</h1>

<div id="chat" class="chat-scroll flex flex-col space-y-4 p-4 bg-white/10 rounded-xl overflow-y-auto h-96 border border-white/10"></div>

<form id="chat-form" class="relative">
              <textarea id="input" rows="2"
                class="w-full p-4 pr-20 rounded-xl bg-gray-800 text-white placeholder-gray-400 shadow-md resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder="Type your message here..."></textarea>
              <button type="submit" class="absolute right-4 top-3 text-blue-400 hover:text-blue-600 transition font-semibold">
                Send
              </button>
            </form>
          </div>
        `;
      }

connectedCallback() {
        const input = this.shadowRoot.getElementById('input');
        const form = this.shadowRoot.getElementById('chat-form');
        const chat = this.shadowRoot.getElementById('chat');

const addMessage = (text, sender = 'user') => {
          const msg = document.createElement('div');
          msg.className = `
            max-w-[75%] px-5 py-3 rounded-xl whitespace-pre-line text-sm shadow 
            ${sender === 'user' 
              ? 'self-end bg-blue-600 text-white' 
              : 'self-start bg-gray-700 text-gray-100'}
          `;
          msg.textContent = text;
          chat.appendChild(msg);
          chat.scrollTop = chat.scrollHeight;
        };

const addSpinner = () => {
          const wrapper = document.createElement('div');
          wrapper.className = 'self-start flex items-center space-x-2';
          wrapper.id = 'typing';

const spinner = document.createElement('div');
          spinner.className = 'spinner';

const text = document.createElement('span');
          text.className = 'text-sm text-white/60';
          text.textContent = 'AI is typing...';

wrapper.appendChild(spinner);
          wrapper.appendChild(text);
          chat.appendChild(wrapper);
          chat.scrollTop = chat.scrollHeight;
        };

const removeSpinner = () => {
          const spinner = this.shadowRoot.getElementById('typing');
          if (spinner) spinner.remove();
        };

form.addEventListener('submit', (e) => {
          e.preventDefault();
          const query = input.value.trim();
          if (!query) return;

addMessage(query, 'user');
          input.value = '';
          input.style.height = 'auto';

addSpinner();

setTimeout(() => {
            removeSpinner();
            const aiResponse = generateMockAIResponse(query);
            addMessage(aiResponse, 'ai');
          }, 1200);
        });

// Auto-expand textarea height
        input.addEventListener('input', () => {
          input.style.height = 'auto';
          input.style.height = input.scrollHeight + 'px';
        });
      }
    }

customElements.define('ai-chat-box', AIChatBox);
  </script>
</body>
</html>

Related Examples

A Fullscreen Hero Section

Author:
Brandon D

2 years ago

18.9k
Full Page loading overlay

Author:
Bunny

2 years ago

11.2k
Gradient Spinner

Author:
sql_guru

2 years ago

12.6k
Avatar with Gradient Shadow

Author:
Prajwal Hallale

2 years ago

10k
Maintenance page template
The site is under maintenance placeholder page

Author:
Anonymous

1 year ago

8.4k
Background image section

Author:
Marc

1 year ago

5.5k
Hero

Author:
Aman kumar

1 year ago

6k
Hero Section
Home hero section search bar

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

6.5k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

11.5k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

1 year ago

4k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

11 months ago

6.7k
Hero Beer

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

11 months ago

3.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components