Tutti i componenti | Code Components Hub

Neumorfismo E-commerce Cursore a carosello

Un componente di scorrimento del carosello neumorfico reattivo con supporto per temi scuri per l'e-commerce, utilizzando Tailwind CSS. Presenta una combinazione di colori complementari. Non viene utilizzato alcun JavaScript.

Apri anteprima

                <div class="flex items-center justify-center w-full h-full py-24 sm:py-8 px-4">
    <div class="w-full relative flex items-center justify-center">
        <button aria-label="slide backward" class="absolute z-30 left-0 ml-10 focus:outline-none focus:bg-gray-400 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 cursor-pointer" id="prev">
            <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7 1L1 7L7 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
        <div class="w-full h-full mx-auto overflow-x-hidden overflow-y-hidden">
            <div id="slider" class="h-full flex lg:gap-8 md:gap-6 gap-14 items-center justify-start transition ease-out duration-700">
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                 <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button aria-label="slide forward" class="absolute z-30 right-0 mr-10 focus:outline-none focus:bg-gray-400 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400" id="next">
            <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L7 7L1 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
    </div>
</div>

Componente di navigazione Glassmorphism

Un componente di navigazione in stile glassmorphism per siti di e-commerce, con colori monocromatici, design reattivo e supporto per la modalità oscura utilizzando Tailwind CSS.

Apri anteprima

                <nav class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg shadow-lg md:flex md:justify-between md:items-center py-4 px-6 fixed w-full z-10 dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg">
    <div class="flex justify-between items-center">
        <a href="#" class="text-gray-700 text-xl font-bold md:text-2xl dark:text-white">Your Logo</a>
        <div class="flex md:hidden">
            <button type="button" class="text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-gray-200 dark:hover:text-white">
                <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                    <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
                </svg>
            </button>
        </div>
    </div>

    <div class="hidden md:flex flex-col md:flex-row md:mx-6">
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Home</a>
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Shop</a>
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Categories</a>
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Contact</a>
    </div>

    <div class="relative hidden md:block">
        <span class="absolute inset-y-0 left-0 flex items-center pl-3">
            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
                <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
        </span>

        <input type="text" class="w-full border rounded-md pl-10 pr-4 py-2 focus:border-blue-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white" placeholder="Search">
    </div>
</nav>

Componente Colonne

Componente Colonne reattive con stile Glassmorphism, combinazione di colori triadica, livello di complessità semplice per scopi aziendali/aziendali, include il supporto per la modalità oscura.

Apri anteprima

                 responsibly written html code with tailwind classes which apply Glassmorphism style, Triadic color scheme, Simple complexity level, includes dark mode support, is responsive, and uses picsum.photos or randomuser.me if needed.

Componenti caricatori

Un componente Loader reattivo progettato per la modalità scura, con toni della terra e complessità moderata per la presentazione del portfolio.

Apri anteprima

                <div class="min-h-screen flex flex-col items-center justify-center bg-gray-900 text-gray-100">
    <h1 class="text-3xl font-bold mb-6">Loading...</h1>
    <div class="flex space-x-4">
        <!-- Loader 1 -->
        <div class="flex flex-col items-center">
            <div class="w-16 h-16 rounded-full bg-earth-700 animate-bounce">  
                <img class="w-full h-full rounded-full" src="https://picsum.photos/seed/1/100" alt="Loading Image 1">
            </div>
            <p class="mt-2">Loading content...</p>
        </div>
        
        <!-- Loader 2 -->
        <div class="flex flex-col items-center">
            <div class="w-16 h-16 rounded-full bg-earth-600 animate-bounce">  
                <img class="w-full h-full rounded-full" src="https://picsum.photos/seed/2/100" alt="Loading Image 2">
            </div>
            <p class="mt-2">Almost there...</p>
        </div>
        
        <!-- Loader 3 -->
        <div class="flex flex-col items-center">
            <div class="w-16 h-16 rounded-full bg-earth-500 animate-bounce">  
                <img class="w-full h-full rounded-full" src="https://picsum.photos/seed/3/100" alt="Loading Image 3">
            </div>
            <p class="mt-2">Just a moment...</p>
        </div>
    </div>
    <div class="mt-8 p-4 rounded-lg bg-gray-800 shadow-lg">
        <h2 class="text-xl font-semibold">Featured Projects</h2>
        <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="p-4 rounded-lg bg-earth-700 shadow hover:shadow-xl transition-shadow duration-300">
                <img src="https://picsum.photos/seed/4/500/300" alt="Project 1" class="rounded-lg">
                <h3 class="mt-2 text-lg font-semibold">Project Title 1</h3>
                <p class="text-gray-300">Short description of the project.</p>
            </div>
            <div class="p-4 rounded-lg bg-earth-700 shadow hover:shadow-xl transition-shadow duration-300">
                <img src="https://picsum.photos/seed/5/500/300" alt="Project 2" class="rounded-lg">
                <h3 class="mt-2 text-lg font-semibold">Project Title 2</h3>
                <p class="text-gray-300">Short description of the project.</p>
            </div>
            <div class="p-4 rounded-lg bg-earth-700 shadow hover:shadow-xl transition-shadow duration-300">
                <img src="https://picsum.photos/seed/6/500/300" alt="Project 3" class="rounded-lg">
                <h3 class="mt-2 text-lg font-semibold">Project Title 3</h3>
                <p class="text-gray-300">Short description of the project.</p>
            </div>
            <div class="p-4 rounded-lg bg-earth-700 shadow hover:shadow-xl transition-shadow duration-300">
                <img src="https://picsum.photos/seed/7/500/300" alt="Project 4" class="rounded-lg">
                <h3 class="mt-2 text-lg font-semibold">Project Title 4</h3>
                <p class="text-gray-300">Short description of the project.</p>
            </div>
        </div>
    </div>
</div>

Componente Casella di ricerca

Un componente della casella di ricerca in stile 3D progettato per siti Web aziendali e aziendali, dotato di un'interfaccia complessa con profondità, elementi interattivi e supporto per la modalità oscura.

Apri anteprima

                <div class="flex flex-col items-center justify-center p-6 bg-gradient-to-r from-gray-800 to-gray-700 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
    <h2 class="text-white text-2xl font-semibold mb-4">Search Our Resources</h2>
    <div class="relative w-full max-w-md">
        <input type="text" placeholder="Search..." class="w-full p-4 pl-10 text-gray-900 dark:text-gray-300 bg-white dark:bg-gray-800 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition-all duration-200" />
        <div class="absolute inset-y-0 left-0 flex items-center pl-3">
            <img src="https://picsum.photos/20/20" alt="Search Icon" class="w-5 h-5 text-gray-400 dark:text-gray-500" />
        </div>
    </div>
    <div class="flex justify-between items-center w-full mt-4">
        <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg shadow hover:bg-blue-700 transition-all duration-200">Search</button>
        <button class="px-4 py-2 text-sm font-medium text-gray-200 dark:text-gray-400 hover:underline">Advanced Search</button>
    </div>
</div>

Componente Moduli minimalisti

Un componente di forma minimalista su misura per i portfolio, caratterizzato da una combinazione di colori pastello, layout semplice, design reattivo e supporto per la modalità oscura utilizzando Tailwind CSS.

Apri anteprima

                <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-100 to-purple-100 dark:from-gray-800 dark:to-gray-900 p-6">
  <div class="max-w-md w-full bg-white dark:bg-gray-700 rounded-lg shadow-xl p-8">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Get in Touch</h2>
    <form>
      <div class="mb-4">
        <label for="name" class="block text-gray-700 dark:text-gray-200 text-sm font-medium mb-2">Name</label>
        <input type="text" id="name" name="name" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-medium mb-2">Email</label>
        <input type="email" id="email" name="email" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white">
      </div>
      <div class="mb-6">
        <label for="message" class="block text-gray-700 dark:text-gray-200 text-sm font-medium mb-2">Message</label>
        <textarea id="message" name="message" rows="4" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white"></textarea>
      </div>
      <button type="submit" class="w-full bg-blue-400 dark:bg-blue-700 text-white py-2 px-4 rounded-md hover:bg-blue-500 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 transition duration-200">Send Message</button>
    </form>
  </div>
</div>

Componente di confronto dei prodotti

Un componente di confronto dei prodotti semplice e reattivo con un design glassmorphism, una combinazione di colori del tono della terra e il supporto della modalità scura. Visualizza due schede prodotto affiancate su schermi più grandi e impilate su schermi più piccoli.

Apri anteprima

                <div class="container mx-auto p-4">
  <div class="flex flex-col lg:flex-row gap-4">
    
    <!-- Product 1 -->
    <div class="flex-1 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
      <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Product A</h2>
      <img src="https://picsum.photos/seed/product1/4
00/300" alt="Product A" class="rounded-md mb-4">
      <p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
      <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
      </ul>
      <button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded dark:bg-green-600 dark:hover:bg-green-700">Learn More</button>
    </div>

    <!-- Product 2 -->
    <div class="flex-1 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
      <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Product B</h2>
      <img src="https://picsum.photos/seed/product2/400/300" alt="Product B" class="rounded-md mb-4">
      <p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
      <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
        <li>Feature A</li>
        <li>Feature B</li>
        <li>Feature C</li>
      </ul>
      <button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded dark:bg-green-600 dark:hover:bg-green-700">Learn More</button>
    </div>

  </div>
</div>

Componente Profili utente

Componente profili utente reattivi con microinterazioni, combinazione di colori vivaci e livello di complessità semplice per il portfolio.

Apri anteprima

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-r from-purple-500 to-pink-500 dark:from-gray-800 dark:to-gray-900">
  <div class="w-full max-w-sm bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
    <div class="flex justify-center">
      <img class="w-24 h-24 rounded-full border-4 border-purple-500 dark:border-pink-500" src="https://randomuser.me/api/portraits/women/65.jpg" alt="Profile Picture">
    </div>
    <div class="text-center mt-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Jane Doe</h2>
      <p class="text-sm text-gray-600 dark:text-gray-300">Web Developer</p>
    </div>
    <div class="flex justify-around mt-6">
      <div class="text-center">
        <p class="text-lg font-semibold text-purple-600 dark:text-pink-600">Projects</p>
        <p class="text-gray-600 dark:text-gray-300">12</p>
      </div>
      <div class="text-center">
        <p class="text-lg font-semibold text-purple-600 dark:text-pink-600">Followers</p>
        <p class="text-gray-600 dark:text-gray-300">500</p>
      </div>
    </div>
    <div class="mt-6 text-center">
      <button class="px-4 py-2 bg-purple-600 text-white text-sm font-semibold rounded-lg hover:bg-purple-700 dark:bg-pink-600 dark:hover:bg-pink-700 transform transition duration-300 hover:translate-y-1">View Profile</button>
    </div>
  </div>
</div>

Barra laterale per l'e-commerce

Barra laterale Glassmorphism reattiva per l'e-commerce con modalità scura

Apri anteprima

                <div class="flex h-screen bg-gray-200 dark:bg-gray-900">

    <!-- Glassmorphism Sidebar -->
    <div class="w-64 px-2 py-6 bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-30 dark:backdrop-filter dark:backdrop-blur-lg">
        <div class="flex items-center justify-center">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white">E-Store</h2>
        </div>
        <nav class="mt-10">
            <a href="#" class="flex items-center px-4 py-2 text-gray-700 transform rounded-md dark:text-gray-200 hover:bg-gray-200 hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-50">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7M19 10v10a1 1 0 01-1 1h-3m-2-7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
                Home
            </a>

            <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 transform rounded-md dark:text-gray-200 hover:bg-gray-200 hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-50">
                 <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
                Products
            </a>

            <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 transform rounded-md dark:text-gray-200 hover:bg-gray-200 hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-50">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                Cart
            </a>

             <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 transform rounded-md dark:text-gray-200 hover:bg-gray-200 hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-50">
                 <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c1.03-.523 2.165-.943 3.356-.943 1.224 0 2.424.42 3.451.923L15.172 21H12v-3a3 3 0 00-3-3H5s.5-2 2-3c2.104-1.992 3.413-3.97 4.613-5.648l-.765-.765z"></path></svg>
                Wishlist
            </a>

        </nav>
    </div>

    <!-- Main Content Area (can be added here) -->
    <div class="flex-1 p-10">
        <!-- Your main content goes here -->
    </div>

</div>

Componente della finestra di chat

Un componente minimalista per la finestra di chat per i siti di e-commerce, caratterizzato da una combinazione di colori in scala di grigi, complessità moderata e reattività con supporto della modalità oscura. Costruito con HTML e Tailwind CSS.

Apri anteprima

                <div class="flex flex-col h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Chat Header -->
  <header class="flex items-center justify-between p-4 bg-white dark:bg-gray-800 shadow-md">
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
      <h1 class="ml-3 text-lg font-semibold text-gray-800 dark:text-white">Customer Support</h1>
    </div>
    <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </header>

  <!-- Chat Body -->
  <div class="flex-1 overflow-y-auto p-4 space-y-4">
    <!-- Incoming Message -->
    <div class="flex justify-start">
      <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white p-3 rounded-lg max-w-xs">
        <p>Hello! How can I help you today?</p>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex justify-end">
      <div class="bg-blue-500 dark:bg-blue-700 text-white p-3 rounded-lg max-w-xs">
        <p>I have a question about my order.</p>
      </div>
    </div>

    <!-- Incoming Message with Avatar -->
    <div class="flex justify-start items-start">
      <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/thumb/women/76.jpg" alt="User Avatar">
      <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white p-3 rounded-lg max-w-xs">
        <p>Ok, please provide your order number.</p>
      </div>
    </div>

    <!-- Outgoing Message with Image -->
    <div class="flex justify-end">
      <div class="bg-blue-500 dark:bg-blue-700 text-white p-3 rounded-lg max-w-xs">
        <p>Here is a screenshot:</p>
        <img class="mt-2 rounded-lg" src="https://picsum.photos/id/237/200/150" alt="Order Screenshot">
      </div>
    </div>

  </div>

  <!-- Chat Footer (Input Area) -->
  <footer class="flex items-center p-4 bg-white dark:bg-gray-800 shadow-md">
    <input type="text" placeholder="Type your message..." class="flex-1 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600">
    <button class="ml-4 p-2 bg-blue-500 dark:bg-blue-600 text-white rounded-lg hover:bg-blue-600 dark:hover:bg-blue-700">
      Send
    </button>
  </footer>
</div>