chatbot

is my chatbot

This tailwind example is contributed by Omer fils ELENGA, on 07-Nov-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Omer fils ELENGA

Fork Fullscreen

@keyframes laserBorder {
            0% {
              background-position: 0% 50%;
            }
            100% {
              background-position: 300% 50%;
            }
          }

/* Effet de chargement "laser" */
          .typing-dot {
            width: 8px;
            height: 8px;
            background: #1769c2;
            border-radius: 50%;
            animation: typingPulse 1.4s infinite ease-in-out;
          }
          .typing-dot:nth-child(1) {
            animation-delay: 0s;
          }
          .typing-dot:nth-child(2) {
            animation-delay: 0.2s;
          }
          .typing-dot:nth-child(3) {
            animation-delay: 0.4s;
          }

@keyframes typingPulse {
            0%,
            100% {
              transform: scale(1);
              opacity: 1;
            }
            50% {
              transform: scale(1.2);
              opacity: 0.4;
            }
          }

/* Effet laser sur réponse finale */
          @keyframes laserSweep {
            0% {
              width: 0%;
              left: 0;
            }
            100% {
              width: 100%;
              left: 0;
            }
          }
          .laser-reveal {
            position: relative;
            opacity: 0;
            animation: laserReveal 0.6s forwards;
          }
          .laser-reveal::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(
              90deg,
              transparent,
              #178cbe,
              #1769c2,
              transparent
            );
            animation: laserSweep 1s forwards 0.3s;
          }
          @keyframes laserReveal {
            to {
              opacity: 1;
            }
          }
</style>
   
  
    <div x-data="{ open: false }" class="fixed bottom-6 right-6 z-50">
      <button
        @click="open = true"
        class="w-14 h-14 rounded-full bg-gradient-to-r from-[#178cbe] to-[#1769c2] flex items-center justify-center shadow-lg hover:shadow-xl transition-shadow"
        aria-label="Ouvrir le chat IA">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-6 h-6 text-white"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor">
          <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-5l-5 5v-5z" />
        </svg>
      </button>

<div
        x-show="open"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 scale-90"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-90"
        class="absolute bottom-20 right-0 w-[95vw] max-w-xs md:max-w-md bg-[#050e16] rounded-2xl shadow-2xl overflow-hidden laser-border"
        @click.outside="open = false"
        role="dialog"
        aria-modal="true">
        
        <div
          class="px-4 py-3 bg-gray-900 border-b border-gray-800 flex items-center gap-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-5 h-5 text-[#1769c2]"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor">
            <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-5l-5 5v-5z" />
          </svg>
          <h3 class="text-white font-medium">Assistant Vision-It</h3>
        </div>

<div
          x-data="{
      messages: [
        { text: 'Bonjour ! 👋 Comment puis-je vous aider ?', sender: 'bot' }
      ],
      input: '',
      isTyping: false,
      sendMessage() {
        if (!this.input.trim()) return;
        this.messages.push({ text: this.input, sender: 'user' });
        this.input = '';
        this.isTyping = true;

setTimeout(() => {
          this.isTyping = false;
          const replies = [
            'Merci pour votre message ! Vision-It vous accompagne dans votre transformation numérique.',
            'Nos experts reviendront vers vous très vite.',
            '💡 Intéressé par une solution sur mesure ? Parlez-nous de votre projet !'
          ];
          this.messages.push({ 
            text: replies[Math.floor(Math.random() * replies.length)], 
            sender: 'bot' 
          });
        }, 1800);
      }
    }"
          class="flex flex-col h-80">
          <div class="flex-1 p-4 overflow-y-auto space-y-3">
            <template x-for="msg in messages" :key="msg.text">
              <div
                :class="{
            'ml-auto bg-[#1769c2] text-white rounded-2xl px-4 py-2 max-w-[80%]': msg.sender === 'user',
            'mr-auto bg-gray-800 text-gray-200 rounded-2xl px-4 py-2 max-w-[80%] laser-reveal': msg.sender === 'bot'
          }"
                x-text="msg.text"></div>
            </template>
            <div x-show="isTyping" class="mr-auto flex gap-1">
              <div class="typing-dot"></div>
              <div class="typing-dot"></div>
              <div class="typing-dot"></div>
            </div>
          </div>

<div class="border-t border-gray-800 p-3 flex gap-2">
            <input
              type="text"
              x-model="input"
              @keyup.enter="sendMessage()"
              placeholder="Écrivez un message..."
              class="flex-1 bg-gray-800 text-white rounded-full px-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#1769c2]" />
            <button
              @click="sendMessage()"
              class="bg-[#1769c2] w-10 h-10 rounded-full flex items-center justify-center text-white">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="w-4 h-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>

Related Examples

Chatbox template

Author:
Lucas Martinez

2 years ago

12.3k
walletp2p

Author:
Anonymous

10 months ago

1.2k
Heading Style

Author:
KULDEEP

5 months ago

357
Skills Showcase, My Tech Stack and Expertise & Skills
🚀 Showcasing My Skills with TailwindCSS & Flexbox! I’ve designed a responsive and interactive Skills Section using Tailwind CSS and Flexbox. With smooth hover effects and a clean layout, this section highlights my expertise in: 🔹 Frontend Technologies – HTML, CSS, JavaScript, React, Next.js 🔹 Styling Frameworks – TailwindCSS 🔹 Backend & Tools – Node.js, Git

Author:
Muhammad Umair Arshad

7 months ago

991
Help and support center ticketing system
Help and support center ticketing system

Author:
Rushikesh Latpate

8 months ago

1.3k
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

2.5k
button animation
button animation big

Author:
QQ-VVN

5 months ago

531
Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

2 years ago

13.5k
image

Author:
pablitodgb

4 months ago

279
Hero Section
Modern Gradient Color Scheme - Uses a professional purple-to-teal gradient for visual appeal Animated Elements: Floating decorative circles with subtle animation Fade-in effect for the main illustration Pulsing status indicator Engaging Typography: Gradient text for key phrases Responsive font sizing Clean Poppins font family Social Proof Elements: Client avatars Star ratings Trust indicators ("Trusted by 500+ businesses") Call-to-Action Buttons: Primary gradient button Secondary outlined button Hover effects and transitions Visual Hierarchy: Clear headline with emphasis on transformation Supporting subheading Balanced layout with image Performance Indicators: ROI badge Growth metric badge Responsive Design: Works on mobile and desktop Grid layout that adapts to screen size

Author:
KULDEEP

4 months ago

731
Invoice
Invoice

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

573
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

3 months ago

678

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components