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

403

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

macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

172
Email newsletter section

Author:
Samuel Dawson

2 years ago

9.2k
Subscribe to newsletter section

Author:
Sophia Baker

2 years ago

11.2k
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

8 months ago

1.2k
Tailwind Email Newsletter Form

Author:
Sameer Sultana

2 years ago

12.9k
Clean newsletter

Author:
Lucas Martinez

2 years ago

11.4k
cards
html , css ,

Author:
Hacker Development

5 months ago

598
newsletter
Subscribe to our newsletter for latest updates and offers.

Author:
ORGIN_DREAMS

5 months ago

519
Subscribe to newsletter section

Author:
Leon Bachmann

2 years ago

11.6k
Newsletter Subscription Form

Author:
Moriba Traore

2 years ago

11.1k
Newsletter
Newsletter section

Author:
Alok

3 years ago

10.7k
Newsletter subscription card

Author:
Samuel Dawson

2 years ago

10k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components