JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<div class="wrapper">
    <div class="op"></div>
    <div class="container">
        <div>
            <a class="f-l">БИОГРАФИЯ</a>
        <a class="f-l">ОБУЧЕНИЕ</a>
        <a class="f-r">НОВОСТИ</a>
        <a class="f-r">КОНТАКТЫ</a>
        <div class="wrap">            
            <h6 class="t-c">Мастер спорта по теннису</h6>
            <h2 class="t-c">Роман макаров</h2>
            <hr style="background-color: #cf3;border:0;height:1px;">
        </div>
        </div>
        
        <br>
    <p>Suspendisse tempus quis metus sed sollicitudin. Nam pellentesque porta arcu, eu blandit mi. Sed pretium lobortis quam. Praesent ut sollicitudin tortor. Quisque augue diam, accumsan nec auctor sit amet, malesuada at lorem. Vestibulum vitae lacus ante. Curabitur dictum felis purus, ac aliquam magna molestie quis. In a egestas enim, ac porta libero. Donec bibendum ante nec dignissim suscipit. Maecenas interdum, odio eget vestibulum lobortis, sem turpis congue nisi, sit amet rhoncus justo neque vel velit. Cras sit amet tempus eros, ut ultrices nunc. In nec neque quis quam bibendum facilisis.</p>
    </div>
   
</div>
    <div id="ball1" class="ball"></div>

CSS

* {
    margin: 0; padding: 0;
}
body {
    background: url('http://goo.gl/aM3DQ4');
    color: #fff;
}
h1,h2,h3,h4,h5,h6 {
    text-transform: uppercase;
}
.op {
   background: #000;
    opacity: 0.2;
    position: absolute;
    min-width: 80%;
    min-height: 100%;
}
.wrapper {
    min-width: 80%;
    max-width: 80%;
    margin: 0px auto;
}
.container {
    padding: 1em;
    position: absolute;
max-width: 75%;
min-height: 100%;
}
.t-c {
    text-align: center;
}
.ball {
    background: url('http://www.soccer-world.ru/sites/soccer-world.ru/files/imagecache/130x130max/category_pictures/homepage-tennis-ball.png');
    height: 130px;
    width: 124px;
}
.f-l {
    float:left;
}
.f-r {
    float:right;
}
a.f-l{
    margin-right: 10px;
    font-size: 11px;
}
a.f-r{
    margin-left: 10px;
    font-size: 11px;
}
.wrap {
    min-width: 50%;
    max-width: 50%;
    margin: 0px auto;
}
#ball1 {position: absolute; right: 30px; top: 130px; }