JSFiddle - React, Tailwind, and code Playground

HTML

<div class="glavblock">
		<a href="#">
				<div class="imblock">
						<div class="gimag">
                            <img src="http://www.upload.ee/image/4637573/piggy_bank.jpg">
                        </div>
  
                </div>
                <div class="text-block">
						<div class="btext">
                            <span>Популярные <span class="brati">микрозаймы</span> с быстрым онлайн оформлением</span>
							<div class="stavka">От 0,75% в сутки</div>
                        </div>
  
                </div>
  </a>
				
</div>

CSS

.glavblock { width: 100% !important;   float:left; height:300px;box-shadow:0 1px 2.94px .06px rgba(0,0,0,.2);background-color:#fff;background-repeat:no-repeat; margin-top: 20px; margin-bottom: 20px;margin-right: 2%; }
.glavblock a{ text-decoration: none;}
.glavblock:hover  a{ color:#fff; }

.glavblock:hover{background-color:rgba(41,169,226,.8);transition:background-color .4s; color: #fff; }
.glavblock:nth-child(3n){
     margin-right: 0px;
}

.text-block  { margin-left: 6%; width:44%; vertical-align: middle; height:300px; text-align:left; line-height: 40px; display: table; vertical-align:middle;  cursor:pointer}
.btext {font-size: 24px; display: table-cell; vertical-align: inherit; color: #313b40;}
.btext .brati {color: #52b9e6; text-transform:uppercase; font-weight:bold;}
.btext .stavka {color: #ccc9c3; font-size: 18px; padding-top: 10px;}
.glavblock:hover .btext .brati, .glavblock:hover .btext {color: #fff;}
.imblock  { float: right; width:50%; vertical-align: middle; height:300px; text-align:right; line-height: 40px; display: table; vertical-align:middle;  z-index:3;cursor:pointer}
.gimag {font-size: 24px; display: table-cell; vertical-align: inherit; color: #313b40; }