Home
Maxim
Dionysus AI Chat

Dionysus AI Chat

This tailwind example is contributed by Maxim, on 26-Sep-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Maxim

274

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dionysus AI Chat</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/marked@16.3.0/lib/marked.umd.min.js"></script>
    <style>
        .highlight-message { 
            animation: slideInFade 0.5s ease-out; 
        }
        
        @keyframes slideInFade {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .glass-effect {
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .chat-bubble-user {
            background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
            box-shadow: 0 10px 30px rgba(236, 72, 153, 0.3);
        }
        
        .chat-bubble-assistant {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .typing-animation {
            animation: pulse 2s infinite;
        }
        
        .gradient-border {
            background: linear-gradient(45deg, #ec4899, #be185d, #9333ea, #7c3aed);
            background-size: 400% 400%;
            animation: gradientShift 3s ease infinite;
        }
        
        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        .send-button {
            background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
            transition: all 0.3s ease;
        }
        
        .send-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(236, 72, 153, 0.4);
        }
        
        .send-button:active {
            transform: translateY(0);
        }
        
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #ec4899, #be185d);
            border-radius: 10px;
        }
        
        .input-glow:focus {
            box-shadow: 0 0 20px rgba(236, 72, 153, 0.3);
        }
    </style>
</head>
<body class="bg-gradient-to-br from-purple-900 via-pink-900 to-rose-900 min-h-screen p-4">
    <div class="max-w-4xl mx-auto">
        <div x-data="aiChat('sample search query')" class="backdrop-blur-lg bg-white/10 rounded-3xl border border-white/20 shadow-2xl overflow-hidden">
            
            <div class="relative overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-r from-pink-500 via-rose-500 to-purple-600 opacity-90"></div>
                <div class="absolute inset-0 bg-gradient-to-br from-transparent via-white/10 to-transparent"></div>
                <div class="relative p-6">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-4">
                            <div class="p-3 bg-white/20 rounded-2xl backdrop-blur-sm">
                                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-4l-4 4z"></path>
                                </svg>
                            </div>
                            <div>
                                <h3 class="text-2xl font-bold text-white">Dionysus AI</h3>
                                <p class="text-white/80 text-sm">Expert in alcohol, cocktails & beverages</p>
                            </div>
                        </div>
                        <div class="hidden sm:flex items-center space-x-2">
                            <div class="px-3 py-1 bg-white/20 rounded-full backdrop-blur-sm">
                                <span class="text-white/90 text-xs font-medium">AI Powered</span>
                            </div>
                            <div class="w-3 h-3 bg-green-400 rounded-full animate-pulse shadow-lg shadow-green-400/50"></div>
                        </div>
                    </div>
                </div>
            </div>

<div class="h-96 overflow-y-auto p-6 space-y-4 custom-scrollbar" x-ref="messagesContainer" style="background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);">
                <template x-for="message in messages" :key="message.id">
                    <div class="flex" :class="message.role === 'user' ? 'justify-end' : 'justify-start'" :data-message-id="message.id">
                        <div class="max-w-xs lg:max-w-md xl:max-w-lg">
                            <div class="relative group">
                                <div class="px-6 py-4 rounded-3xl" 
                                     :class="message.role === 'user' ? 'chat-bubble-user text-white' : 'chat-bubble-assistant text-gray-800'">
                                    <div class="text-sm leading-relaxed" x-html="message.content"></div>
                                    <div class="text-xs mt-3 opacity-70 flex items-center space-x-2">
                                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
                                        </svg>
                                        <span x-text="message.timestamp"></span>
                                    </div>
                                </div>
                                
                                
                                <template x-if="message.role === 'assistant' && message.showCopy">
                                    <button 
                                        @click="copyMessage(message.content)"
                                        class="absolute -top-2 -right-2 p-2 bg-white/90 hover:bg-white text-gray-600 hover:text-gray-800 rounded-full shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-300 transform hover:scale-110"
                                        aria-label="Copy message"
                                    >
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                                        </svg>
                                    </button>
                                </template>
                            </div>
                        </div>
                    </div>
                </template>

<div x-show="isLoading" class="flex justify-start">
                    <div class="max-w-xs">
                        <div class="chat-bubble-assistant px-6 py-4 rounded-3xl">
                            <div class="flex items-center space-x-3">
                                <div class="flex space-x-1">
                                    <div class="w-2 h-2 bg-gradient-to-r from-pink-500 to-purple-500 rounded-full animate-bounce"></div>
                                    <div class="w-2 h-2 bg-gradient-to-r from-pink-500 to-purple-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
                                    <div class="w-2 h-2 bg-gradient-to-r from-pink-500 to-purple-500 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
                                </div>
                                <span class="text-sm text-gray-600 font-medium typing-animation">Dionysus is thinking...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="p-6 border-t border-white/10 backdrop-blur-sm" style="background: rgba(255,255,255,0.05);">
                <form @submit.prevent="sendMessage" class="flex space-x-4">
                    <div class="flex-1 relative">
                        <input 
                            type="text" 
                            x-model="currentMessage"
                            :disabled="isLoading"
                            placeholder="Ask me anything about alcohol, cocktails, brands, recipes..."
                            class="w-full px-6 py-4 bg-white/90 backdrop-blur-sm border border-white/20 rounded-2xl focus:outline-none focus:ring-2 focus:ring-pink-500/50 focus:border-transparent disabled:bg-gray-100/50 disabled:cursor-not-allowed transition-all duration-300 input-glow text-gray-800 placeholder-gray-500"
                        >
                        <div class="absolute inset-0 rounded-2xl bg-gradient-to-r from-pink-500/20 to-purple-500/20 opacity-0 transition-opacity duration-300 pointer-events-none" :class="{'opacity-100': currentMessage.trim()}"></div>
                    </div>
                    
                    <button 
                        type="submit"
                        :disabled="isLoading || !currentMessage.trim()"
                        class="send-button px-6 py-4 text-white rounded-2xl disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none transition-all duration-300 flex items-center justify-center min-w-[4rem] shadow-lg"
                    >
                        <svg x-show="!isLoading" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                        </svg>
                        <svg x-show="isLoading" class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                    </button>
                </form>
                
                <div class="flex items-center justify-between mt-4">
                    <p class="text-xs text-white/60 flex items-center space-x-2">
                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"></path>
                        </svg>
                        <span>Press Enter to send</span>
                    </p>
                    <div class="flex items-center space-x-2 text-xs text-white/60">
                        <div class="flex space-x-1">
                            <div class="w-1 h-1 bg-green-400 rounded-full animate-pulse"></div>
                            <div class="w-1 h-1 bg-green-400 rounded-full animate-pulse" style="animation-delay: 0.5s"></div>
                            <div class="w-1 h-1 bg-green-400 rounded-full animate-pulse" style="animation-delay: 1s"></div>
                        </div>
                        <span>AI Optimized</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

Related Examples

Todo List
A simple tool to track tasks: add, edit, complete, or delete items to stay organized daily.

Author:
Muzammil Riaz

5 months ago

672
Tailwind Google Map widget

Author:
Dung Vuong

4 months ago

246
Customer support chatbox
Floating chatbox

Author:
gmer33

2 years ago

11.5k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

167
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

6 months ago

946
Modern website that provides software services
The website is a platform that offers software services to users, including access to open-source code, downloadable projects, and relevant documentation. The main objective is to support students, developers, and the open-source community by sharing free tools and source code examples.

Author:
Rathanak Phan

4 months ago

305
invoice 02
product invoice

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

481
Age verification 18+

Author:
Maxim

10 months ago

909
Login page

Author:
Reuben Enahoro

11 months ago

1.8k
Full Page loading overlay

Author:
Bunny

2 years ago

12.2k
Track Your Order
Track Your Order

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

370
Moving Background Animation

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

9 months ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components