Chat Box for Marketing

An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

This tailwind example is contributed by Coastal UI, on 05-Oct-2024. Component is made with Tailwind v3.4. similar terms for this example are CTA,banner,Front page

Call to Action Hero Comment Section Landing Page

Author Coastal UI

Tailwind v3.4 2.7k 9

Fork Fullscreen

<div class="w-full flex justify-center">
    <div class="flex items-center justify-center bg-[#030303] w-[900px] m-6 mr-12 my-12 pb-10 border border-1 border-zinc-300 border-opacity-30 rounded-md relative overflow-hidden p-5">
        <div class="absolute -top-10 -right-10 w-[72%] h-12 bg-gray-500 rounded-full opacity-90 blur-[100px]"></div>
        <div class="absolute -bottom-10 -left-10 w-[72%] h-8 bg-blue-500 rounded-full opacity-90 blur-[100px]"></div>
        <div class="flex flex-col w-full">
            <div id="rightMsg" class="flex justify-end items-center">
                <div class="w-[400px] bg-[#030303] border border-1 border-zinc-300 border-opacity-30 rounded-md flex items-center px-2 py-2 text-zinc-300 relative">
                    Hey, we just completed the landing page. Any thoughts?
                    <div class="absolute -bottom-6 right-0 text-zinc-600 text-sm">
                        Sent at 2:50pm
                    </div>
                </div>
                <img src="https://github.com/thomas5.png?size=56" class="h-12 w-12 border border-[1px] border-zinc-300 border-opacity-50 rounded-full ml-3 opacity-90 pl-[1px]"/>
            </div>
            <div id="leftMsg" class="flex justify-start items-center mt-8">
                <img src="https://github.com/mojombo.png?size=56" class="h-12 w-12 border border-[1px] border-zinc-300 border-opacity-50 rounded-full mr-3 opacity-90" alt="User avatar"/>
                <div class="w-[400px] min-h-[56px] bg-[#030303] border border-1 border-zinc-300 border-opacity-30 rounded-md flex items-start px-2 py-2 text-zinc-300 relative">
                Hey, I just reviewed the landing page. It looks great! What's next?
                <div class="absolute -bottom-6 left-0 text-zinc-600 text-sm">
                    Sent at 3:05pm
                </div>
                </div>
            </div>
            <div id="rightMsg" class="flex justify-end items-center mt-8">
                <div class="w-[400px] bg-[#030303] border border-1 border-zinc-300 border-opacity-30 rounded-md flex items-center px-2 py-2 text-zinc-300 relative">
                    We are going to start work on the contact us form, using that agreed upon design.
                    <div class="absolute -bottom-6 right-0 text-zinc-600 text-sm">
                        Sent at 3:07pm
                    </div>
                </div>
                <img src="https://github.com/thomas5.png?size=56" class="h-12 w-12 border border-[1px] border-zinc-300 border-opacity-50 rounded-full ml-3 opacity-90 pl-[1px]"/>
            </div>
            <div id="leftMsg" class="flex justify-start items-center mt-8">
                <img src="https://github.com/mojombo.png?size=56" class="h-12 w-12 border border-[1px] border-zinc-300 border-opacity-50 rounded-full mr-3 opacity-90" alt="User avatar"/>
                <div class="w-[400px] min-h-[56px] bg-[#030303] border border-1 border-zinc-300 border-opacity-30 rounded-md flex items-start px-2 py-2 text-zinc-300 relative">
                This is all looking awesome! I look forward to our review meeting tommorow at 11:00am.
                <div class="absolute -bottom-6 left-0 text-zinc-600 text-sm">
                    Sent at 3:12pm
                </div>
                </div>
            </div>
        </div>
    </div>
</div>