MessageComponent.tsx

import React from 'react'

function MessageComponent() {
    return (
        <div className="w-full py-4 px-4 flex flex-col space-y-3 overflow-y-auto" style={{ minHeight: '460px', maxHeight: '460px' }}>
            <div className="flex items-center">
                <img className="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt=""></img>
                <div className="bg-white ml-3 rounded-md text-sm py-3 px-3 w-96">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur adipisci voluptatibus id nesciunt molestias ab impedit sapiente harum vero rem itaque, dolore saepe. Ratione culpa ipsam aliquid cupiditate sapiente sint?
                </div>
            </div>
            <div className="flex items-center" style={{ direction: 'rtl'}}>
                <img className="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt=""></img>
                <div className="bg-white mr-3 rounded-md text-sm py-3 px-3 w-96">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur adipisci voluptatibus id nesciunt molestias ab impedit sapiente harum vero rem itaque, dolore saepe. Ratione culpa ipsam aliquid cupiditate sapiente sint?
                </div>
            </div>
            <div className="flex items-center">
                <img className="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt=""></img>
                <div className="bg-white ml-3 rounded-md text-sm py-3 px-3 w-96">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur adipisci voluptatibus id nesciunt molestias ab impedit sapiente harum vero rem itaque, dolore saepe. Ratione culpa ipsam aliquid cupiditate sapiente sint?
                </div>
            </div>
            <div className="flex items-center" style={{ direction: 'rtl'}}>
                <img className="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt=""></img>
                <div className="bg-white mr-3 rounded-md text-sm py-3 px-3 w-96">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur adipisci voluptatibus id nesciunt molestias ab impedit sapiente harum vero rem itaque, dolore saepe. Ratione culpa ipsam aliquid cupiditate sapiente sint?
                </div>
            </div>
            <div className="flex items-center">
                <img className="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt=""></img>
                <div className="bg-white ml-3 rounded-md text-sm py-3 px-3 w-96">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur adipisci voluptatibus id nesciunt molestias ab impedit sapiente harum vero rem itaque, dolore saepe. Ratione culpa ipsam aliquid cupiditate sapiente sint?
                </div>
            </div>
            <div className="flex items-center" style={{ direction: 'rtl'}}>
                <img className="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt=""></img>
                <div className="bg-white mr-3 rounded-md text-sm py-3 px-3 w-96">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur adipisci voluptatibus id nesciunt molestias ab impedit sapiente harum vero rem itaque, dolore saepe. Ratione culpa ipsam aliquid cupiditate sapiente sint?
                </div>
            </div>
            <div className="flex items-center">
                <img className="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt=""></img>
                <div className="bg-white ml-3 rounded-md text-sm py-3 px-3 w-96">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur adipisci voluptatibus id nesciunt molestias ab impedit sapiente harum vero rem itaque, dolore saepe. Ratione culpa ipsam aliquid cupiditate sapiente sint?
                </div>
            </div>
            <div className="flex items-center" style={{ direction: 'rtl'}}>
                <img className="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt=""></img>
                <div className="bg-white mr-3 rounded-md text-sm py-3 px-3 w-96">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur adipisci voluptatibus id nesciunt molestias ab impedit sapiente harum vero rem itaque, dolore saepe. Ratione culpa ipsam aliquid cupiditate sapiente sint?
                </div>
            </div>
        </div>
    )
}

export default MessageComponent