JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<div class="col-xs-12 col-sm-12" style="margin: 0;">
                            <div class="main-banner-footer">
                                <div class="main-banner-content">
                                    <a href="/projects/populyarnye-proekty/proekt-tk-228/">
                                        <div class="main-banner-info">
                                                                                        <span class="banner_text">
                                                <div class="main-banner-title"><span class="topTitle">228м<sup>2</sup><small>Кирпичный дом</small></span></div>
                                                <div class="main-banner-text">
                                                  <div class="row tk-228">
<div class="col-xs-12 description">
Стабильность <br>  и комфорт камня
</div>
</div>

                                              </div>
                                            </span>
                                            <span class="main-banner-button">
                                                <span class="banner_button">Узнать цену</span>
                                            </span>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <style>
                        body{
  background-color:black;
}
.main-banner-footer {
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 10;
}
.main-banner-info {
    padding: 4rem 3rem 5rem 3rem;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    background-position: bottom;
    color: #fff;
    width: 360px;
    background-color: rgba(200, 130, 28, 0);
}
.main-banner-title {
    font-size: 36px;
    font-weight: bold;
    line-height: 1;
    text-align: left;
    text-shadow: 0 0 10px #000105;
    margin-top: 40px;
   ...

CSS

body{
  background-color:black;
}
.main-banner-footer {
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 10;
}
.main-banner-info {
    padding: 4rem 3rem 5rem 3rem;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    background-position: bottom;
    color: #fff;
    width: 360px;
    background-color: rgba(200, 130, 28, 0);
}
.main-banner-title {
    font-size: 36px;
    font-weight: bold;
    line-height: 1;
    text-align: left;
    text-shadow: 0 0 10px #000105;
    margin-top: 40px;
    margin-bottom: 10px;
}
.main-banner-text {
    font-size: 20px;
    line-height: 1.43;
    text-align: left;
    font-weight: normal;
    text-shadow: 0 0 40px #000105;
} 
.row {
    margin-right: -15px;
    margin-left: -15px;
}
.tk-228 .description {
    text-shadow: none;
}
.col-xs-12 {
    text-align: left;
}




a {
    display: block;
    font-size: 60px;
    margin-bottom: 10px;
    text-shadow: none;
}