JSFiddle - React, Tailwind, and code Playground

by Kostya Puchkov

HTML

<body>
    <header class="navbar navbar-fixed-top navbar-inverse">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1">
                    <div class="navbar-header">
                        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a href="index.php" class="navbar-brand">Мой сайт</a>
                    </div>
                    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                        <ul class="nav navbar-nav navbar-right">
                                <li><a href="author.php?id=">Профиль</a></li>
                                <li id="logout"><a href="php/logout.php">Выйти</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </header>

    <div class="container wrapper">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-4 col-lg-offset-1 lside">
                <img class="avatar img-rounded" src="http://i054.radikal.ru/1105/bd/1a566383e375.jpg">
            </div>
            <div id="content" class="col-lg-7 col-md-8 col-sm-8 main">
                <h3 class="name"><b>Имя автора</b></h3>
                <table class="table-info">
                    <tr>
                        <td class="info-title">День рождения:</td>
                        <td>20 сентября 1985</td>
                    </tr>
                    <tr>
                        <td class="info-title">Город:</td>
                        <td>Санкт-Петербург</td>
                    </tr>
                </table>           ...

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
html { height: 100%; }
body{ height: 100%;padding-top: 50px;}
.row { height:100%; }
.wrapper { height: 100%;padding-bottom: 50px; }
.footer{ position: relative;margin-top: -50px;height: 50px;clear: both; }
.lside {height:100%;padding: 20px;background-color: rgba(163, 163, 163, 0.11);box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);}
.main {height: 1000px;padding: 20px;background-color: #fff;border: 1px solid #bfbfbf;}
.name {margin: 0 0 10px 0;}
.avatar {width: 100%;margin-bottom: 20px;}
.info-title {width: 150px;height: 28px;vertical-align: top;color: #777;}
.table-info {margin-bottom: 20px;}