JSFiddle - React, Tailwind, and code Playground

by congrammer

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Испытание: взломанный котопрофайл</title>
        <meta charset="utf-8">
        <style>
        /* Будешь знать, как сувать лапы, куда не надо,
           шерстяной неудачник! */
            #info-title,
            .profile .button{
                background:#4DFE15;
            }
            .profile div.fact{
                background:#FF00DC;
            }
            .profile .fact div{
                color:#02F801;
            }
            .photo span{
                margin:0;
                height:20px;
                text-align:right;
            }
            #miska{
                margin-right:50px;
            }
        </style>
    </head>
    <body>
        <div class="profile">

            <div class="info">
                <h2 id="info-title">Общая информация</h2>
                <div class="fact">
                    <div class="title">Имя</div>
                    <div class="value">Феликс</div>
                </div>
                <div class="fact">
                    <div class="title">Позывные</div>
                    <div class="value">Кто в тапки нассал?</div>
                </div>
                <div class="fact">
                    <div class="title">Вероисповедание</div>
                    <div class="value">Верю в холодильник</div>
                </div>
                <div class="fact">
                    <div class="title">Политические</div>
                    <div class="value">Продам все за еду</div>
                </div>
                <h2 style="margin-top:-50px;padding:0;">Альбомы</h2>
                <div class="albums">
                    <img src="http://www.htmlacademy.ru/assets/course66/cat_drink.png">
                    <img id="miska" src="http://www.htmlacademy.ru/assets/course66/cat_hungry.png">
                    <img src="http://www.htmlacademy.ru/assets/course66/cat_sing.png">
                    <img...

CSS

html, body{
    margin:0;
    padding:0;
}
body{
    font-family:Tahoma, Arial, sans-serif;
    font-size:12px;
    width:550px;
    height:300px;
}
.profile{
    padding:5px 10px;
}
.profile img{
    display:block;
    padding:10px;
    border: 2px solid #34495e;
    border-radius:1px;
}
.photo{
    float:left;
    width:152px;
}
.info{
    float:left;
    width:368px;
    margin-left:10px;
}
.info h2, .info #info-title{ /* добавлен селектор по id */
    margin:0 !important; /* переопределение двух свойств в... */
    padding:10px !important; /* ...инлайн-стилях последнего <h2> */
    font-size:12px;
    font-weight:normal;
    background:#34495e;
    color:#fff;
    border-radius:1px;
}
.profile .info .fact{ /* добавлено .profile .info */
    padding:10px;
    background:white;
}
.profile .fact:nth-child(odd){ /* добавлено .profile */
    background:#ecf0f1;
}
.fact:after{
    content:"";
    clear:both;
    display:table;
}
.profile .fact .title{ /* добавлено .profile */
   float:left;
   width:120px;
   text-align:right;
   color:#7f8c8d;
}
.profile .fact .value{ /* добавлено .profile */
   margin-left:140px;
   color:#34495e;
}
.albums{
    margin-top:5px;    
}
.albums img, .albums #miska{ /* добавлен селектор по id */
    float:left;
    margin-right:5px;
}
.albums img:last-child{
    margin-right:0;
}
.profile .button{ /* добавлено .profile */
    display:block;
    height:30px;
    margin:5px 0;
    text-align:center;
    line-height:30px;
    color:#fff;
    border-radius:4px;
}
.profile .photo .stroke{ /* добавлено .profile .photo */
    background:#3498db;
}
.profile .photo .feed{ /* добавлено .profile .photo */
    background:#2ecc71;
}
.profile .photo .startle{ /* добавлено .profile .photo */
    background:#e74c3c;
}