JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<header>
        <div class="container blacken">
            <div class="row">
                <div class="col-lg-12">
                    <img class="img-responsive" src="http://programs-tv.ru/upload/tv/videos/6/534/s_53332.jpg" alt="">
                    <div class="intro-text">
                        <span class="name">Главная надпись</span>
                        <hr class="star-light">
                        <span class="skills">Второстепенная надпись</span>
                </div>
                </div>
            </div>
        </div>
    </header>
    </body>

CSS

header {
    text-align: center;
    color: #fff;
    background-image: url(http://www.fonstola.ru/pic/201111/1600x900/fonstola.ru-55699.jpg);
}
.blacken{
    background-color: rgba(0,0,0,0.25);
    height: 100%;
    left: 0;
//    opacity: 0.25;
    top: 0;
    width: 100%;
    z-index: 80;
}
header .container {
    padding-top: 100px;
    padding-bottom: 50px;
}
header img {
    display: block;
    margin: 0 auto 20px;
}
header .intro-text .name {
    display: block;
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 2em;
    font-weight: 700;
}
header .intro-text .skills {
    font-size: 1.25em;
    font-weight: 300;
}