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

142

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

Moving Background Animation

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

8 months ago

2.6k
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

3 months ago

972
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

5 months ago

660
default template

Author:
Anonymous

4 months ago

275
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

8 months ago

1.5k
Payment form

Author:
ORGIN_DREAMS

4 months ago

350
Play, Pause and Stop buttons

Author:
Lukas Müller

2 years ago

11.2k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Abhiraj

8 months ago

1.6k
Simple Payment Successfull Notification Page

Author:
Anonymous

4 months ago

878
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Author:
Indra

1 month ago

75
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Author:
Muhammad Umair Arshad

6 months ago

423
Track Your Order
Track Your Order

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

304

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components