सीएसएस चैटबॉक्स यूआई: रिस्पॉन्सिव मैसेजिंग इंटरफेस

392 thedashboard1

संपादक में खोलें Video अपना कोड प्रकाशित करें

सीएसएस चैटबॉक्स यूआई: रिस्पॉन्सिव मैसेजिंग इंटरफेस

अनुशंसित

9 December 2025

सीएसएस पीला इलेक्ट्रिक बॉर्डर प्रभाव

28 November 2025

सीएसएस लिक्विड ग्लास बटन होवर प्रभाव

1 January 2025

ग्रेडिएंट टेक्स्ट सीएसएस एनीमेशन

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Messaging Chatbox</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Basic Reset and Setup */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

/* Chat Container Styling */
        #chat-container {
            width: 100%;
            max-width: 380px;
            height: 550px;
            background: white;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

/* Header */
        #chat-header {
            padding: 15px;
            background-color: #007bff;
            color: white;
            font-size: 1.2em;
            font-weight: 600;
            text-align: center;
        }

/* Message Display Area */
        #messages {
            flex-grow: 1;
            padding: 15px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
            background-color: #e5ddd5; /* WhatsApp-like background */
        }

/* Individual Message Bubble */
        .message {
            max-width: 75%;
            padding: 10px 12px;
            border-radius: 18px;
            line-height: 1.4;
            word-wrap: break-word;
            box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
        }

/* Sent Messages (Right aligned) */
        .sent {
            align-self: flex-end;
            background-color: #dcf8c6; /* Light green */
            color: #1f2d33;
            border-bottom-right-radius: 4px; /* Tail effect */
        }

/* Received Messages (Left aligned) */
        .received {
            align-self: flex-start;
            background-color: white;
            color: #1f2d33;
            border-bottom-left-radius: 4px; /* Tail effect */
        }

/* Input Area */
        #input-area {
            display: flex;
            padding: 10px;
            border-top: 1px solid #ddd;
            background-color: #f0f2f5;
        }

#message-input {
            flex-grow: 1;
            padding: 10px 15px;
            border: none;
            border-radius: 20px;
            margin-right: 8px;
            font-size: 16px;
            outline: none;
        }

#send-button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 20px;
            cursor: pointer;
            transition: background-color 0.2s;
            font-weight: 600;
        }

#send-button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>

<div id="chat-container">
        <div id="chat-header">
            User Name / Group Chat
        </div>

<div id="messages">
            
            <div class="message received">Hey there! How are you doing today?</div>
            <div class="message sent">I'm great, thanks! Just testing out this new chat interface.</div>
            <div class="message received">It looks very responsive. Did you use Flexbox for the layout?</div>
            <div class="message sent">Yes, Flexbox for the container and message alignment. It makes alignment much easier!</div>
            <div class="message received">Awesome! Good job.</div>
        </div>

</body>
</html>

सीएसएस चैटबॉक्स यूआई: रिस्पॉन्सिव मैसेजिंग इंटरफेस

अनुशंसित

सीएसएस पीला इलेक्ट्रिक बॉर्डर प्रभाव

सीएसएस लिक्विड ग्लास बटन होवर प्रभाव

ग्रेडिएंट टेक्स्ट सीएसएस एनीमेशन

HTML

CSS

JS

अनुशंसित

सीएसएस पीला इलेक्ट्रिक बॉर्डर प्रभाव

सीएसएस लिक्विड ग्लास बटन होवर प्रभाव

ग्रेडिएंट टेक्स्ट सीएसएस एनीमेशन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS