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

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

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

5 months ago

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

Author:
Hamza Atig

2 months ago

133
Email newsletter section

Author:
Samuel Dawson

2 years ago

8.8k
Subscribe to newsletter section

Author:
Leon Bachmann

2 years ago

11.4k
Subscribe to Newsletter
Subscribe to Newsletter section with minimal design and black and white colors

Author:
Leon Bachmann

2 years ago

10.9k
Bar Chart with TailwindCSS and AlpineJS

Author:
Akshay

2 years ago

12.4k
Subscribe to newsletter section

Author:
Sophia Baker

2 years ago

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

Author:
Samuel Dawson

2 years ago

10.7k
Sign up for newsletter form

Author:
Amit Pachange

2 years ago

11.6k
Newsletter example

Author:
Task Master

2 years ago

9k
Responsive Form
This modern, fully responsive account creation form is designed using HTML and Tailwind CSS, ensuring a clean, professional, and accessible user experience. It features a card-based layout with smooth spacing, a subtle shadow effect, and a structured grid system for optimal responsiveness across all devices.

Author:
Rajesh Maheshwari

3 months ago

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

Author:
ORGIN_DREAMS

4 weeks ago

146

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components