JSFiddle - React, Tailwind, and code Playground

by humanzing

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="chat_widget">
  <div class="head">
 <div class="Grid Grid--gutters Grid--cols-6 u-textCenter">
    <div class="Grid-cell">
      <div class="content-1of3 cen">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Monika Figi">
        <a>Humanzing</a>
      </div>
    </div>
    <div class="Grid-cell"><div class="content-1of3 cen"></div></div>
    <div class="Grid-cell"><div class="content-1of3 cen">
    <button id="menu" class="right">
    Ξ
    </button></div></div>

  </div>  
  </div>
  <div class="history" id="pages_history">
<ul>
<li>
<label>
Humazing
<a>18/04 23h30</a>
<a><i class="fa fa-flag" aria-hidden="true"></i></a>
<a><i class="fa fa-cog" aria-hidden="true"></i></a>
<a><i class="fa fa-heart" aria-hidden="true"></i></a>
<a><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
</label><p style="position:relative">
zfeffrfrregr<span style="position:absolute;bottom=0;right:0;width 50px;heght:50px;
"><i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</span>
</p></li>
<li>efefef</li>
<li>efefef</li>
<li>efefef</li>
<li>efefef</li>
<li>efefef</li>
</ul>
  </div>
  <div class="post">
   <div class="Grid Grid--gutters Grid--cols-1 u-textCenter">
    <div class="Grid-cell">
      <div class="content-1of1 bot" >
      <button>
      ✩
      </button>
      <input type="text">
       <button>
      ↵
      </button>
      </div>
      
    </div>
   
  </div> 

  </div>
</div>
<div id="menu_ui" class="chat_widget_menu" style="  display:none;">
<input type="radio" name="tab" id="tab-A" checked="">
<input type="radio" name="tab" id="tab-B">

<label class="tab-link" for="tab-A">Public room</label>
<label class="tab-link" for="tab-B">Private tchat</label>
<article class="tab">
	<ul id="public" class="user_room">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
    <li>A</li>
  <li>B</li>
 ...

CSS

.wrapper {
  max-width: 1200px;
  margin: auto;
}

h1, h2, h3, h4 {
  font-weight: 900;
  color: #333;
  margin: 1.5em 0 0.5em;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.8em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.3em;
}

strong {
  font-weight: 600;
}

hr {
  border: none;
  height: 1px;
  background-color: rgba(51, 153, 204, 0.2);
}

.img-placeholder {
  background-image: url("http://placehold.it/200x100/CC99CC/ffffff&text=Feature");
  background-size: cover;
  min-height: 100px;
  min-width: 100px;
}

/*Basic Grid Styles*/
.Grid {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
}

.u-textCenter {
  text-align: center;
}

.Grid-cell {
  flex: 1;
}
/* With gutters*/
.Grid--gutters {
  margin-left: -1em;
}
.Grid--gutters .Grid-cell {
  padding-left: 1em;
}
.Grid--gutters .Grid--nested .Grid-cell:first-of-type .Demo {
  margin-right: 1em;
}

/* Justify per row*/
.Grid--right {
  justify-content: flex-end;
}

.Grid--center {
  justify-content: center;
}

/* Alignment per row */
.Grid--top {
  align-items: flex-start;
}

.Grid--bottom {
  align-items: flex-end;
}

.Grid--center {
  align-items: center;
}

/* Alignment per cell */
.Grid-cell--top {
  align-self: flex-start;
}

.Grid-cell--bottom {
  align-self: flex-end;
}

.Grid-cell--center {
  align-self: center;
}

.navigation {
  list-style: none;
  /*background: deepskyblue;*/
  background: rgba(102, 51, 255, 0.1);
  margin: 0 0 1em;
  border: 1px solid #33cccc;
  border-radius: 3px;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: flex-end;
}
.navigation a {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: #333;
}
.navigation a:hover {
  background: rgba(64, 0, 255, 0.1);
  border-radius: 3px;
}
.navigation:hover {
  background: rgba(102, 51, 255, 0.25);
}

@media all and (max-width: 800px) {
  .navigation {
    justify-content: space-around;
  }
}
@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow:...

JavaScript

(function() {
    'use strict';


var chatroom = "";
setInterval(function(){ 

//	document.getElementById("pages_history").innerHTML = "";
  
}, 1000);

document.getElementById("menu").addEventListener("click", menus);
function menus()
{
var menu = document.getElementById("menu_ui").style.display;
if(document.getElementById("menu_ui").style.display === "none")
{
	document.getElementById("menu_ui").style.display = "block";
}
else
{
	document.getElementById("menu_ui").style.display = "none";
}
}
function getEventTarget(e) {
    e = e || window.event;
    return e.target || e.srcElement; 
}

var ul = document.getElementById('user');
ul.onclick = function(event) {
    var target = getEventTarget(event);
  //  alert(target.innerHTML);
  //   alert(target.id);
     set_chatroom(target.id);
 
     menus();
        refresh_chat();
};
var ul1 = document.getElementById('public');
ul1.onclick = function(event) {
    var target = getEventTarget(event);
   // alert(target.innerHTML);
   //alert(target.name);
   set_chatroom(target.id);
     menus();
     refresh_chat();
};
function set_chatroom(a)
{
chatroom = a;
}
function refresh_chat()
{
alert(chatroom);
}
    // Your code here...
})();