Home
ORGIN_DREAMS
Best chat prompt

Best chat prompt

This tailwind example is contributed by ORGIN_DREAMS, on 22-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Graph,Email campaign

Chart Newsletter

Author ORGIN_DREAMS

609

Fork Fullscreen

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden">
  
  <div class="bg-gray-50 px-4 py-3 border-b flex items-center justify-between">
    <div class="flex items-center space-x-3">
      <button class="text-gray-500 hover:text-gray-700">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
        </svg>
      </button>
      <div class="flex items-center space-x-2">
        <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Alex Morgan">
        <div>
          <p class="font-medium text-gray-900">Alex Morgan</p>
          <p class="text-xs text-gray-500">Online</p>
        </div>
      </div>
    </div>
    <div class="flex items-center space-x-3">
      <button class="text-gray-500 hover:text-gray-700">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v8a2 2 0 01-2 2h-2a2 2 0 01-2-2V6z" />
        </svg>
      </button>
      <button class="text-gray-500 hover:text-gray-700">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>
  </div>
  
  
  <div class="h-96 overflow-y-auto p-4 space-y-3">
    
    <div class="flex items-start space-x-2">
      <img class="h-8 w-8 rounded-full object-cover flex-shrink-0" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Alex Morgan">
      <div>
        <div class="bg-gray-100 rounded-lg p-3 max-w-xs">
          <p class="text-gray-800">Hey! How's it going?</p>
        </div>
        <p class="text-xs text-gray-500 mt-1">10:30 AM</p>
      </div>
    </div>
    
    
    <div class="flex items-start justify-end space-x-2">
      <div class="text-right">
        <div class="bg-blue-500 text-white rounded-lg p-3 max-w-xs ml-auto">
          <p>Pretty good! Just finished that project we talked about.</p>
        </div>
        <p class="text-xs text-gray-500 mt-1">10:32 AM</p>
      </div>
      <img class="h-8 w-8 rounded-full object-cover flex-shrink-0" src="https://randomuser.me/api/portraits/women/45.jpg" alt="You">
    </div>
    
    
    <div class="flex items-start space-x-2">
      <img class="h-8 w-8 rounded-full object-cover flex-shrink-0" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Alex Morgan">
      <div>
        <div class="bg-gray-100 rounded-lg p-2 max-w-xs">
          <img class="rounded w-full" src="https://source.unsplash.com/random/300x200/?design" alt="Design work">
          <p class="text-gray-800 mt-1">This looks amazing! Great job!</p>
        </div>
        <p class="text-xs text-gray-500 mt-1">10:35 AM</p>
      </div>
    </div>
    
    
    <div class="flex items-start justify-end space-x-2">
      <div class="text-right">
        <div class="bg-blue-500 text-white rounded-lg p-3 max-w-xs ml-auto">
          <p>Thanks! I appreciate it. Let me know if you want to collaborate on something.</p>
        </div>
        <p class="text-xs text-gray-500 mt-1">10:37 AM</p>
      </div>
      <img class="h-8 w-8 rounded-full object-cover flex-shrink-0" src="https://randomuser.me/api/portraits/women/45.jpg" alt="You">
    </div>
    
    
    <div class="flex items-start space-x-2">
      <img class="h-8 w-8 rounded-full object-cover flex-shrink-0" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Alex Morgan">
      <div>
        <div class="bg-gray-100 rounded-lg p-3 max-w-xs">
          <p>Definitely! I have an idea for a new project. Are you free this weekend to discuss?</p>
        </div>
        <p class="text-xs text-gray-500 mt-1">10:39 AM</p>
      </div>
    </div>
  </div>
  
  
  <div class="border-t p-3 bg-gray-50">
    <div class="flex items-center space-x-2">
      <button class="text-gray-500 hover:text-gray-700 p-1 rounded-full">
        <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="M12 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
      </button>
      <input type="text" placeholder="Type a message" class="flex-1 border border-gray-300 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
      <button class="text-gray-500 hover:text-gray-700 p-1 rounded-full">
        <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="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </button>
      <button class="bg-blue-500 text-white p-2 rounded-full hover:bg-blue-600">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>
  </div>
</div>

Related Examples

Newsletter Section
On your website or application, add a beautiful and responsive Newsletter Subscription Form. These Tailwind CSS Newsletter Forms are easy to use and customizable, allowing you to create a wide range of newsletter form styles that suit your website's design.

Author:
Alif Bima Pradana

1 month ago

23
Line chart with chart.js and tailwind css

Author:
Kairi Greene

3 years ago

12.2k
Bar Chart with TailwindCSS and AlpineJS

Author:
Akshay

3 years ago

13.6k
Subscription
Subscription list

Author:
Abhiraj

1 year ago

1k
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

Author:
SHARIFUL ISLAM

1 year ago

1.6k
Newsletter subscription card

Author:
Samuel Dawson

3 years ago

10.3k
Beta Program Signup Section
Collect user emails for your app

Author:
yousef

1 year ago

2.6k
Chat UI
The Chat UI is a responsive and interactive component designed for building messaging interfaces. Ideal for applications like customer support, social media, or team collaboration tools, it provides a modern, user-friendly layout for real-time communication.

Author:
Abhiraj

1 year ago

3.2k
Newsletter Signup Form

Author:
R Thapa

2 years ago

8.9k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

6 months ago

478
Dash.OS: Drag & Drop Dashboard Widget System
A fully interactive, freeform dashboard builder for the browser. Drop in widgets, drag them anywhere, resize to fit, and your layout is automatically remembered. Ships with a live Chart.js revenue chart, KPI stats, a task tracker, and a notifications feed, all in a single zero-dependency HTML file with dark/light mode built in.

Author:
Ijila Itunu

2 weeks ago

144
Newsletter section

Author:
Anonymous

2 years ago

8.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components