JSFiddle - React, Tailwind, and code Playground
by HappyCougar
HTML
<div id="phone_box">
<img src="http://rlexpert.ru/templates/real/images/phone_icon.png" id="phone_icon"/>
<div id="number_box"><span class="pre_number">495</span><span class="main_number">255-08-90</span></div>
<span id="number_descr">пн-пт 10-18; выходные - по записи</span>
<a href="#" class="message_link">написать нам</a>
<a href="#" id="tell_button">обратный звонок</a>
</div>
CSS
#phone_box {
width:220px;
height:95px;
position:relative;
}
#phone_icon {
position:absolute;
top: 3px;
left:0px;
}
#number_box {
margin-left:30px;
font-family:arial;
color:#959595;
}
.pre_number {
font-size:22px;
margin:5px;
}
.main_number {
font-size:30px;
}
#number_descr {
margin-left: 7px;
font-family: arial;
font-size: 13px;
color:#58585a;
position:relative;
top:-5px;
}
.message_link {
font-family: arial;
font-size: 13px;
color:#1c96d3;
text-decoration:none;
border-bottom:1px dashed #1c96d3;
float: right;
position: relative;
right: 7px;
top: -7px;
cursor:pointer;
}
#tell_button {
background: #8dc63f;
background: -moz-linear-gradient(top, #8dc63f 0%, #6c9f26 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8dc63f), color-stop(100%,#6c9f26));
background: -webkit-linear-gradient(top, #8dc63f 0%,#6c9f26 100%);
background: -o-linear-gradient(top, #8dc63f 0%,#6c9f26 100%);
background: -ms-linear-gradient(top, #8dc63f 0%,#6c9f26 100%);
background: linear-gradient(to bottom, #8dc63f 0%,#6c9f26 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8dc63f', endColorstr='#6c9f26',GradientType=0 );
font-family: arial;
font-size: 13px;
width: 140px;
text-align: center;
color: rgb(255, 255, 255);
height: 20px;
cursor: pointer;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-top: 3px;
position: absolute;
bottom: 0px;
right: 5px;
}