JSFiddle - React, Tailwind, and code Playground

by Terrance Smith

HTML

<div>
  <Chat title="Meeting Title" id="id"></Chat>
</div>

CSS

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-intro {
  font-size: large;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.chat {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chat li {
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px dotted #B3A9A9;
}

.chat li.left .chat-body {
  margin-left: 60px;
}

.chat li.right .chat-body {
  margin-right: 60px;
}

.chat li .chat-body p {
  margin: 0;
  color: #777777;
}

.panel .slidedown .glyphicon,
.chat .glyphicon {
  margin-right: 5px;
}

.panel-body {
  overflow-y: scroll;
  height: 250px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
}

::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #555;
}

TypeScript

// src/components/chat.tsx https://www.codeply.com/go/bp/6mdOs5FvKU
// https://www.bootply.com/6mdOs5FvKU

import * as React from 'react';
import './chat.css';
import {
  User
}
from '../models/User';

class ChatMessage {
  constructor(public message: string, public author: string, public dateTimeStamp: Date) {}
}
class Data {
  public static users = [
    new User('Joe', '[email protected]'),
    new User('Jane', '[email protected]'),
    new User('Sam', '[email protected]')
  ];

  public static messages = [
    new ChatMessage('message 1', 'user1', new Date()),
    new ChatMessage('message 2', 'user2', new Date()),
    new ChatMessage('message 3', 'user1', new Date()),
    new ChatMessage('message 4', 'user1', new Date())
  ];
}

export interface ChatState {
  users: User[];
  messages: ChatMessage[];
}

export interface ChatProps {
  title: string;
  id: string;
}

const ChatMenu: React.SFC = () => {
  return ( < div className = "btn-group pull-right" >
    < button type = "button"
    className = "btn btn-default btn-xs dropdown-toggle"
    data - toggle = "dropdown" >
    < span className = "glyphicon glyphicon-chevron-down" / >
    < /button> < ul className = "dropdown-menu slidedown" > < li > < a href = "http://www.jquery2dotnet.com" >
    < span className = "glyphicon glyphicon-refresh" / > Refresh < /a> < /li > < li >
    < a href = "http://www.jquery2dotnet.com" >
    < span className = "glyphicon glyphicon-ok-sign" / > Available < /a> < /li > < li >
    < a href = "http://www.jquery2dotnet.com" >
    < span className = "glyphicon glyphicon-remove" / > Busy < /a> < /li > < li >
    < a href = "http://www.jquery2dotnet.com" > < span className = "glyphicon glyphicon-time" / >
    Away < /a> < /li > < li className = "divider" / >
    < li >
    < a href = "http://www.jquery2dotnet.com" > < span className = "glyphicon glyphicon-off" / >
    Sign Out < /a> < /li > < /ul> < /div >
  );
};

const ChatHeader: React.SFC < ChatProps > = (props) => {
  return ( < div...