Best chat prompt

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

Chart Newsletter

Author ORGIN_DREAMS

Tailwind v3.4 949 1

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
Subscribe to our newsletter for latest updates and offers.

ORGIN_DREAMS

1 year ago

1.5k
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.

Ijila Itunu

6 months ago

948
Bar Chart with TailwindCSS and AlpineJS

Akshay

4 years ago

14k
Daily growth chart
chart for showing data each day of the week

Samuel Dawson

3 years ago

12k
Newsletter

ariaw

10 months ago

926
Responsive newsletter

Simon Scheffer

3 years ago

10.4k
Subscribe to our newsletter section

Bunny

3 years ago

10.9k
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Hamza Atig

1 year ago

1.3k
Newsletter example

Task Master

3 years ago

10.1k
Newsletter Subscription Card

Anonymous

1 year ago

1.7k
Responsive newsletter

Piet Vriend

3 years ago

10.4k
Bar chart with chart.js and tailwind css

Kairi Greene

3 years ago

11.4k