JSFiddle - React, Tailwind, and code Playground

by crab1127

HTML

<div id="msgBox">

    <form>

        <h2>来 , 说说你在做什么 , 想什么</h2>

        <div>

            <input id="userName" class="f-text" value="" />

            <p id="face"><img src="http://fgm.cc/learn/lesson6/img/face1.gif" class="current" /><img src="http://fgm.cc/learn/lesson6/img/face2.gif" /><img src="http://fgm.cc/learn/lesson6/img/face3.gif" /><img src="http://fgm.cc/learn/lesson6/img/face4.gif" /><img src="http://fgm.cc/learn/lesson6/img/face5.gif" /><img src="http://fgm.cc/learn/lesson6/img/face6.gif" /><img src="http://fgm.cc/learn/lesson6/img/face7.gif" /><img src="http://fgm.cc/learn/lesson6/img/face8.gif" /></p>

        </div>

        <div><textarea id="conBox" class="f-text"></textarea></div>

        <div class="tr">

            <p>

                <span class="countTxt">还能输入</span><strong class="maxNum">140</strong><span>个字</span>

                <input id="sendBtn" type="button" value="" title="快捷键 Ctrl+Enter" />

            </p>

        </div>

    </form>

    <div class="list">

        <h3><span>大家在说</span></h3>

        <ul>

            <li>

                <div class="userPic"><img src="http://fgm.cc/learn/lesson6/img/face.gif" /></div>

                <div class="content">

                    <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>

                    <div class="msgInfo">新增删除广播功能。</div>

                    <div class="times"><span>07月05日 15:14</span><a class="del" href="javascript:;">删除</a></div>

                </div>

            </li>

            <li>

                <div class="userPic"><img src="http://fgm.cc/learn/lesson6/img/face.gif" /></div>

                <div class="content">

                    <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>

                    <div class="msgInfo">新增Ctrl+Enter快捷键发送广播。</div>

                    <div class="times"><span>07月05日 12:20</span><a class="del" href="javascript:;">删除</a></div>

                </div>

            </li>

           ...

CSS

body,div,h2,h3,ul,li,p{margin:0;padding:0;}

a{text-decoration:none;}

a:hover{text-decoration:underline;}

ul{list-style-type:none;}

body{color:#333;background:#3c3a3b;font:12px/1.5 \5b8b\4f53;}

#msgBox{width:500px;background:#fff;border-radius:5px;margin:10px auto;padding-top:10px;}

#msgBox form h2{font-weight:400;font:400 18px/1.5 \5fae\8f6f\96c5\9ed1;}

#msgBox form{background:url(http://fgm.cc/learn/lesson6/img/boxBG.jpg) repeat-x 0 bottom;padding:0 20px 15px;}

#userName,#conBox{color:#777;border:1px solid #d0d0d0;border-radius:6px;background:#fff url(http://fgm.cc/learn/lesson6/img/inputBG.png) repeat-x;padding:3px 5px;font:14px/1.5 arial;}

#userName.active,#conBox.active{border:1px solid #7abb2c;}

#userName{height:20px;}

#conBox{width:448px;resize:none;height:65px;overflow:auto;}

#msgBox form div{position:relative;color:#999;margin-top:10px;}

#msgBox img{border-radius:3px;}

#face{position:absolute;top:0;left:172px;}

#face img{width:30px;height:30px;cursor:pointer;margin-right:6px;opacity:0.5;filter:alpha(opacity=50);}

#face img.hover,#face img.current{width:28px;height:28px;border:1px solid #f60;opacity:1;filter:alpha(opacity=100);}

#sendBtn{border:0;width:112px;height:30px;cursor:pointer;margin-left:10px;background:url(http://fgm.cc/learn/lesson6/img/btn.png) no-repeat;}

#sendBtn.hover{background-position:0 -30px;}

#msgBox form .maxNum{font:26px/30px Georgia, Tahoma, Arial;padding:0 5px;}

#msgBox .list{padding:10px;}

#msgBox .list h3{position:relative;height:33px;font-size:14px;font-weight:400;background:#e3eaec;border:1px solid #dee4e7;}

#msgBox .list h3 span{position:absolute;left:6px;top:6px;background:#fff;line-height:28px;display:inline-block;padding:0 15px;}

#msgBox .list ul{overflow:hidden;zoom:1;}

#msgBox .list ul li{float:left;clear:both;width:100%;border-bottom:1px dashed #d8d8d8;padding:10px 0;background:#fff;overflow:hidden;}

#msgBox .list ul li.hover{background:#f5f5f5;}

#msgBox .list...