JSFiddle - React, Tailwind, and code Playground

by Gnanavel Rathinam

HTML

<div class="container">


                <div class="header">
                </div>
                <div class="leftblock"> 
                </div>



                <div class="chat_box" id="cb">

                <div class="chat_head">Members</div>
                <div class="chat_body">
                
                <div class='nameid' id='10' > Click      <br>      <br> <br> <br>    
                </div>    <br>       
             </div>
             </div>
             <div id="ft" class="footer">


                </div>


                </div>

CSS

.close{

            cursor:pointer;
            position:absolute;

                 }
          .leftblock{
           position:relative;
                   }

          .msg_box{

          display:inline-block;
          position:relative;
          bottom:-5px;
          height:200px;
          width:250px; 
          background:white;
          border-radius:5px 5px 0px 0px;
          float:right;
          margin-right:35px;

          }





        .msg_head{
        background:#3498db; 
        width:250px;
        color:white;
        padding:15px;
        font-weight:bold;
        cursor:pointer;
        border-radius:5px 5px 0px 0px;
        } 

        .msg_body{


        background:white;
        height:200px;
        width:250px;
        font-size:12px;
        padding:15px;
        overflow:auto;
        overflow-x: hidden;

        }

        .msg_input{


        width:280px;
        border: 1px solid white;
        border-top:1px solid #DDDDDD;
        -webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box;    
        box-sizing: border-box;  

        }



        .nameid{
        cursor: pointer; 
        position:relative;
        padding:5px 10px;

        }


        .footer{
        position:fixed;
        left:20px;
        bottom:0;
        width:84%;
        height:342px;
        background:yellow;
        border-radius:5px 5px 0px 0px;
        overflow:hidden;
        overflow-y:hidden;



            }

JavaScript

$(document).on("click", '.nameid', function(e) {
    e.preventDefault(e);
    var parent = document.getElementById('ft');

    var mbox = document.createElement('div');
    mbox.id = 'mb';
    mbox.className = 'msg_box';

    var mhead = document.createElement('div');
    var mx = document.createElement('div');

    mhead.id = 'bb';
    mhead.className = 'msg_head';
    mx.id = 'x'
    mx.className = 'close';


    var mbody = document.createElement('div');
    mbody.className = 'msg_body';

    var mfoot = document.createElement('div');
    mfoot.className = 'msg_footer';

    var mheadall = mhead.appendChild(mx);

    mbox.appendChild(mhead).appendChild(mx);
    mbox.appendChild(mbody);
    mbox.appendChild(mfoot);

    parent.appendChild(mbox);
    var tt = $(this).text();


    var dd = $(this).attr("id");

    $("#bb").text(tt);

    $("#bb").attr("id", dd);


});