Created
September 27, 2023 07:36
-
-
Save princetechs/0c83d9f95c31ef11d94b1cfcb7be1f21 to your computer and use it in GitHub Desktop.
chat ui using tailwind
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| const Chatbox = () => { | |
| return ( | |
| <div className="flex flex-col h-screen"> | |
| <div className="flex items-center justify-between bg-purple-500 px-4 py-2"> | |
| <h1 className="text-white font-bold text-lg">Chatbox</h1> | |
| <button className="text-white"> | |
| <i className="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div className="flex-1 bg-gray-100 p-4 overflow-y-auto"> | |
| <div className="flex flex-col space-y-4"> | |
| <div className="flex items-start"> | |
| <div className="flex-shrink-0"> | |
| <img src="https://dummyimage.com/40x40/ddd/000" alt="User Avatar" className="w-10 h-10 rounded-full" /> | |
| </div> | |
| <div className="ml-4 bg-white rounded-lg p-2"> | |
| <p className="text-gray-800">Hello! How can I assist you today?</p> | |
| </div> | |
| </div> | |
| <div className="flex items-end justify-end"> | |
| <div className="mr-4 bg-purple-500 text-white rounded-lg p-2"> | |
| <p>Sure! I can help you with that.</p> | |
| </div> | |
| <div className="flex-shrink-0"> | |
| <img src="https://dummyimage.com/40x40/ddd/000" alt="User Avatar" className="w-10 h-10 rounded-full" /> | |
| </div> | |
| </div> | |
| <div className="flex items-start"> | |
| <div className="flex-shrink-0"> | |
| <img src="https://dummyimage.com/40x40/ddd/000" alt="User Avatar" className="w-10 h-10 rounded-full" /> | |
| </div> | |
| <div className="ml-4 bg-white rounded-lg p-2"> | |
| <p className="text-gray-800">Is there any discount available?</p> | |
| </div> | |
| </div> | |
| <div className="flex items-end justify-end"> | |
| <div className="mr-4 bg-purple-500 text-white rounded-lg p-2"> | |
| <p>Yes, we have a 20% discount on all products.</p> | |
| </div> | |
| <div className="flex-shrink-0"> | |
| <img src="https://dummyimage.com/40x40/ddd/000" alt="User Avatar" className="w-10 h-10 rounded-full" /> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="bg-gray-200 px-4 py-2"> | |
| <div className="flex items-center"> | |
| <input type="text" placeholder="Type your message..." className="flex-1 bg-white rounded-full py-2 px-4 mr-2" /> | |
| <button className="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full"> | |
| Send | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| export default Chatbox; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment