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

396

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 form

Author:
Leon Bachmann

2 years ago

10.1k
Sign up for newsletter form

Author:
Amit Pachange

2 years ago

11.8k
Responsive newsletter

Author:
Simon Scheffer

2 years ago

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

Author:
Indra

1 month ago

118
Subscription
Subscription list

Author:
Abhiraj

7 months ago

611
Newsletter Signup Form
It features a clean and modern design with a background illustration, making it visually appealing.

Author:
TailwindFlex

2 years ago

7.7k
Newsletter
Newsletter section

Author:
Alok

3 years ago

10.7k
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
Line chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

11.5k
Subscribe to our newsletter section

Author:
Bunny

2 years ago

9.9k
Newsletter
This template ensures your newsletter stands out with smooth animations, professional design, and a responsive layout.

Author:
ishimwe shadad

4 months ago

309
cards
html , css ,

Author:
Hacker Development

5 months ago

589

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components