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

437

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

Contact Us / Enquiry-form Responsive

Author:
KULDEEP

5 months ago

1.1k
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Rathanak Phan

6 months ago

926
Energy Efficiency Program - Oklahoma
Code for new IT proposal

Author:
Mario Williams

6 months ago

402
Glassmorphism form

Author:
Geoffrey Callaghan

2 years ago

6.6k
Linear infinite brand scrolling with hover effect
Beautiful lineat brand scrolling partner with hover effect

Author:
Walid Ahmad

1 year ago

2.5k
Custom Audio Player
🎧 Custom Audio Player (HTML, Tailwind CSS & Alpine.js) A modern, responsive custom audio player built with Tailwind CSS and Alpine.js, designed for a smooth user experience and elegant visuals in both light and dark mode. ✨ Features: 🎵 Play, pause, and mute/unmute controls 📈 Interactive progress bar with seek functionality 🔊 Dynamic volume slider with live preview 🖼️ Album art and track details display ⌨️ Keyboard support — toggle play/pause with the spacebar 🌓 Fully responsive and dark-mode compatible This player uses minimal JavaScript, relying on Alpine.js for reactivity, and can be easily customized or integrated into any web project. Perfect for portfolios, podcasts, or music web apps.

Author:
wavy kits

2 months ago

435
Card KPI
Targetas

Author:
Raul antonio de la cruz hernandez

1 month ago

325
Maintenance page

Author:
Faye

1 year ago

1.6k
Cafee shop
help to buy something that can help you to relax

Author:
INGRIDE MUZIRANENGE

7 months ago

1.2k
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Author:
Abdul Baset Bappy

9 months ago

731
3d card
the Best 3D card with tailwind css

Author:
irahoza daniel

7 months ago

425
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Author:
Abdul Baset Bappy

9 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components