JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<footer id="footerBar">
        <ul id="mainPanel">
            <li><a href="#" data-title="分享到新浪微博" class="sina">sina</a></li>
            <li><a href="#" data-title="分享到腾讯微博" class="qq">qq</a></li>
            <li><a href="#" data-title="分享到搜狐微博" class="sohu">sohu</a></li>
            <li><a href="#" data-title="分享到网易微博" class="t163">t163</a></li>
            <li><a href="#" data-title="分享到百度贴吧" class="tieba">tieba</a></li>
            <li><a href="#" data-title="分享到开心网" class="kaixin">kaixin</a></li>
            <li><a href="#" data-title="分享到人人网" class="renren">renren</a></li>
            <li><a href="#" data-title="分享到MSN" class="msn">msn</a></li>
            <li><a href="#" data-title="分享到FaceBook" class="facebook">facebook</a></li>
            <li><a href="#" data-title="分享到Twitter" class="twitter">twitter</a></li>
            <li><a href="#" data-title="分享到Linkedin" class="linkedin">linkedin</a></li>
            <li><a href="#" data-title="一键分享" class="ishare">ishare</a></li>
        </ul>
    </footer>

CSS

*{margin: 0;padding:0}
        html {
            height: 100%;
        }
        body {
            background: url(images/pattern_40.gif) repeat left top #161616;
            height: 100%;
            font: 12px/162% Tahoma,Arial,Helvetica,"SimSun","Arial Narrow",Geneva,sans-serif;
        }
        
        #footerBar {
            background-color:#161616;
            background: -moz-linear-gradient(top, rgba(22,22,22,.7) 0%, rgba(51,51,51,.7) 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(22,22,22,.7)), color-stop(100%,rgba(51,51,51,.7)));
      background: -webkit-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
      background: -o-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
      background: linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2161616,endColorstr=#B2333333);
            -moz-box-shadow:0 1px 10px rgba(255,255,255,0.3);
            -webkit-box-shadow: 0 1px 10px rgba(255,255,255,0.3);
            box-shadow:0 1px 10px rgba(255,255,255,0.3);
            position:fixed;
            bottom:0;
            left:0;
            z-index:999;
            width:100%;
        }
        #mainPanel {
            float:left;
            width: 80%;
            margin: 0 10%;
            font-size: 1em;
        }
        
        #mainPanel li {
            float: left;
            position: relative;
            border-right: 1px solid #555;
            list-style: none outside none;
        }
        
        #mainPanel li:first-child {
            border-left: 1px solid #555;
        }
        
        #mainPanel a {
            background: url(http://v1.jiathis.com/code/images/jiathis_ico.png) no-repeat left top;
            margin:  5px 20px;
            float: left;
            width: 16px;
            height: 16px;
            color: #333;
            position: relative;
...