JSFiddle - React, Tailwind, and code Playground
by rsolomonjr1
HTML
<div class="call_us pull-right "><a href="https://www.facebook.com/FastRaft" target="_blank"><img src="http://fastraft.com/images/fb_icon.png" class="image" /></a><span><img src="http://fastraft.com/images/top_link_div.gif" /></span><a href="#"><img src="http://fastraft.com/images/location_icon.png" class="image" /></a><span><img src="http://fastraft.com/images/top_link_div.gif" /></span><a href="tel:+18009793370" style="text-decoration: none; color: #454545; font-weight:bold;"><span class="call">Call Zerve at:<div class="zerve">800.979.3370</div></span></a></div>
CSS
/*******
.call_us{
white-space:nowrap;
font-size:24px;
font-weight:bold;
color:#454545;
background:#fff;
padding:2px 10px;
}
.call_us a{
color:#454545;
}
.call_us a:hover{
color:#454545;
text-decoration:none;
}
.call_us img{
margin:4px 4px 0px 0px;
}
.call_us span{
font-size:24px;
margin:1px 5px 0px 5px
font-weight:normal;
}
@media (max-width: 600px) {
.call-us span{
font-size: 16px;
}
.call-us span br{
content:'\n\n';
white-space: pre;
}
****/
.call_us{
white-space:nowrap;
font-size:24px;
font-weight:bold;
color:#454545;
text-align:right;
background:#fff;
padding:2px 10px;
}
.call_us a{
color:#454545;
}
.call_us a:hover{
color:#454545;
text-decoration:none;
}
.call_us img{
margin:4px 4px 0px 0px;
}
.call_us span{
font-size:24px;
margin:1px 5px 0px 5px;
font-weight:normal;
}
.call_us .call{
font-weight: bold;
}
.zerve{
float: right;
padding-top: 5px;
}
@media only screen and (max-width: 480px) {
.call_us{
padding:0 6px;
font-size:13px;
text-align: left;
float: right;
}
.call_us span{
margin-left:2px;
margin-right:4px;
font-size:13px;
text-align: left;
}
.call_us .call{
font-size: 12px;
font-weight: bold;
vertical-align: top;
float: right;
}
.call_us .call:after{
font-weight: bold;
content: '\a';
white-space: pre;
}
.call_us .zerve{
font-size: 13px;
text-align: left;
margin-top: 17px;
margin-left:-75px;
padding:0 3px;
font-weight: bold;
}
}