JSFiddle - React, Tailwind, and code Playground

by thanhansoft

HTML

<link rel="stylesheet" href="https://anninhvungtau.com/themes/building/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="block-content-blue">
      <h2 class="box-note-title">QUY TRÌNH LẮP ĐẶT CAMERA QUAN SÁT</h2>
      <ul>
        <li><i class="fa fa-hand-o-right"></i> Khảo sát cửa hàng thực tế.</li>
        <li><i class="fa fa-hand-o-right"></i> Đưa báo giá dựa trên giải pháp: tiền thiết bị, tiền côngĐưa báo giá dựa trên giải pháp: tiền thiết bị, tiền công.</li>
        <li><i class="fa fa-hand-o-right"></i> Lắp đặt hoàn chỉnh hệ thống.</li>
        <li><i class="fa fa-hand-o-right"></i> Khách hàng kiểm tra hệ thống.</li>
        <li><i class="fa fa-hand-o-right"></i> Nghiệm thu kết thúc hợp đồng.</li>
      </ul>
</section>

CSS

.block-content-blue {
    padding: 7px 17px;
    color: #074d69;
    border-radius: 24px;
    margin: 20px 0;
    background: #d9f4ff;
    border: 2px dashed #11b6cc;
}
.block-content-blue ul{
  padding: 0;
  margin-bottom: 15px;
  list-style: none;
}
.block-content-blue ul li{
    font-size: 19px;
    line-height: 24px;
    margin: 10px 0;
}
.block-content-blue ul li a{color: #074d69;}
.block-content-blue ul li a:hover{color: red;text-decoration:none}
.block-content-blue i.fa.fa-hand-o-right{
  color: #5ab219;
}
.box-note-title {
    font-size: 26px;
    margin: 10px 0;
    color: #ff3300!important;
    text-align:center
}