JSFiddle - React, Tailwind, and code Playground

by Vu Nhubao

HTML

<!-- Compliance patch for Microsoft browsers -->
 <!--[if lt IE 9]>
    <script src="https://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script>
 <![endif]-->

<h2>:checked</h2>

 <div class="chat-box">
        <input type="checkbox" />
        <label class='abc' data-expanded="Close Chatbox" data-collapsed="Open Chatbox"></label>
        <div id="chatForm" class="chat-box-content">Colapse me !!!
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>

CSS

.chat-box {
      font:normal normal 11px/1.4 Tahoma,Verdana,Sans-Serif;
      color:#333;
      width:200px; /* Chatbox width */
      border:1px solid #344150;
      border-bottom:none;
      background-color:white;
      position:fixed;
      right:10px;
      bottom:0;
      z-index:9999;
      -webkit-box-shadow:1px 1px 5px rgba(0,0,0,.2);
      -moz-box-shadow:1px 1px 5px rgba(0,0,0,.2);
      box-shadow:1px 1px 5px rgba(0,0,0,.2);
    }

    .chat-box > input[type="checkbox"] {
      display:block;
      margin:0 0;
      padding:0 0;
      position:absolute;
      top:0;
      right:0;
      left:0;
      width:100%;
      height:26px;
      z-index:4;
      cursor:pointer;
      opacity:0;
      filter:alpha(opacity=0);
      outline: none;
    }

    .chat-box > label {
      display:block;
      height:24px;
      line-height:24px;
      background-color:#344150;
      color:white;
      font-weight:bold;
      padding:0 1em 1px;
    }

    .chat-box > label:before {content:attr(data-collapsed)}

    .chat-box .chat-box-content {
      padding:10px;
      display:none;
    }

    /* hover state */
    .chat-box > input[type="checkbox"]:hover + label {background-color:#404D5A}

    /* checked state */
    .chat-box > input[type="checkbox"]:checked + label {background-color:#344150}
    .chat-box > input[type="checkbox"]:checked + label:before {content:attr(data-expanded)}
    .chat-box > input[type="checkbox"]:checked ~ .chat-box-content {display:block}