JSFiddle - React, Tailwind, and code Playground

by psot98

HTML

<link rel="stylesheet" href="https://dl.dropbox.com/s/wqda2ydv6f6b37i/master.css">
<link rel="stylesheet" href="https://dl.dropbox.com/s/9aqibrk9rr0h778/layout.css">
<link rel="stylesheet" href="https://dl.dropbox.com/s/l71g3dj1wf1gjmc/menues.css">
<link rel="stylesheet" href="https://dl.dropbox.com/s/vet557ukttn46xd/navigation.css">
<link rel="stylesheet" href="https://dl.dropbox.com/sh/26wne78cmn3b39w/G_0fglrTD0/pingdom/boxes.css">
   <div id="wapper">
        <header>
            <div class="center">
                <ul id="navigation">

                    <li>
                        <a href="#" id="dashboard" class="checked">صفحه اصلی</a>
                    </li>

                    <li>
                        <a href="#" id="checks">اتصالات</a>
                    </li>

                    <li>
                        <a href="#" id="reports">پهنای باند </a>
                    </li>

                    <li>
                        <a href="#" id="contacts">اطلاعات کاربر</a>
                    </li>
                    <li>
                        <a href="#" id="account">تنظیمات</a>
                    </li>
                </ul>
            </div>
        </header>

        <div id="container">

            <aside id="content">
                <br />
                <br />
                <br />
                <div id="controls"></div>
                <br />
                <br />
                <br />

                <br />
                <br />
                <br />
            </aside>
        </div>
    </div>
    <section id="fade"></section>

CSS

#user-info {
            direction: rtl;
            color: #FFF;
            width: 100%;
            font-size: 10pt;
            position: relative;
            top: -50px;
            border-collapse: collapse;
        }

            #user-info td {
                border-bottom: solid 1px rgba(192, 192, 192, 0.3);
                padding: 10px;
            }

            #user-info tr td:first-child {
                text-align: left;
                padding-left: 10px;
                width: 100px;
            }

        #charge-info ul {
            position: relative;
            top: -30px;
        }

            #charge-info ul li {
                display: inline-block;
                padding: 15px;
            }

        .box {
            background: #7d7e7d; /* Old browsers */
            background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
            background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
            margin: auto;
            width: 560px;
            padding: 20px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
            border-radius: 15px;
            color: white;
            font-size: 10pt;
            direction: rtl;
        }

            .box .icon {
                width: 100px;
                position: relative;
                top: -60px;
            }