JSFiddle - React, Tailwind, and code Playground

by thanhansoft

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="box-call">
<div class="media">
  <div class="media-left">
  <span class="fa fa-phone fa-3x"></span>
  </div>
  <div class="media-body text-center">
    <h3 class="media-heading box-call-title">Gọi ngay cho: <a title="Gọi tư vấn" href="tel:0942001001">0942.001.001</a></h3>
    <p>Chúng tôi sẵn sàng tư vấn cho bạn, hãy gọi ngay cho chúng tôi</p>
  </div>
</div>
</div>

CSS

.box-call{
  width:70%;
  margin:1em auto;
  padding: 10px 15px;
  border-radius: 3px;
  color:#fff;
  border: 3px solid rgb(188, 213, 48);
  background-color: rgb(188, 213, 48) !important;
}
.box-call .media-left{vertical-align: middle !important}
.box-call .fa{color:red}
.box-call .box-call-title{font-size:25px}
.box-call .box-call-title a{color: red; font-size:27px}
.box-call .box-call-title a:hover{color:#fff}

.media:first-child {
    margin-top: 0;
}
.media, .media-body {
    overflow: hidden;
    zoom: 1;
}
.media-body, .media-left, .media-right {
    display: table-cell;
    vertical-align: top;
}
.media-left, .media>.pull-left {
    padding-right: 10px;
}
.media-body {
    width: 10000px;
}
.media, .media-body {
    overflow: hidden;
    zoom: 1;
}
.media-heading {
    margin-top: 0;
    margin-bottom: 5px;
}
.text-center{text-align:center}