JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div id="blok">
     
    <div id="image"><img src="http://s1.ipicture.ru/uploads/20120620/P6P9Uem4.png" alt="картинка"></div>
     
     <div id="text"> <h3>Сделка без риска.</h3> <p>Сервис по сопровождению ссылок, позволяющий снизить риск неудачного завершения
    сотрудничества для работодателя и фри-лансера</p></div>
     
 </div>

CSS

p { 
  font-size:9px;
  color:  navy; }
  #blok {
    position:relative;
    width:385px;
    height:105px;
    background: #FEFCDB;
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border-radius: 15px 15px 15px 15px;
    border: 2px solid transparent;
   
 }
 
 #image {
    background-image: url(image.png);
    background-repeat: no-repeat;
    width:55px;
    height:60px;
    position:absolute;
    top:20px;
    left:20px;
 }
 
 
 #blok:hover {
 border:2px solid #FFD03F;
 }
 
 #text {
 width:300px;
 height:95px;
 float:right;
}
#text h3 {
    font-size:14px;
    font-weight:400;
    line-height:17px;
    margin: 14px 0 0 0;
    color:#444;
}    

#text p{
    color:#444;
    line-height:15px;
    font-size:12px;
}