JSFiddle - React, Tailwind, and code Playground

by thanhansoft

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="block-content-none-bg">
      <h2 class="box-note-title">QUY TRÌNH LẮP ĐẶT CAMERA QUAN SÁT</h2>
      <ul>
        <li><i class="fa fa-check-square-o"></i> Khảo sát cửa hàng thực tế.</li>
        <li><i class="fa fa-check-square-o"></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-check-square-o"></i> Lắp đặt hoàn chỉnh hệ thống.</li>
        <li><i class="fa fa-check-square-o"></i> Khách hàng kiểm tra hệ thống.</li>
        <li><i class="fa fa-check-square-o"></i> Nghiệm thu kết thúc hợp đồng.</li>
      </ul>
</div>

CSS

.block-content-none-bg {
    color: #074d69;
    margin: 20px 0;
}
.block-content-none-bg ul{
  padding: 0;
  margin-bottom: 15px;
  list-style: none;
}
.block-content-none-bg ul li{
    font-size: 19px;
    line-height: 24px;
    margin: 10px 0;
}
.block-content-none-bg ul li a{color: #074d69;}
.block-content-none-bg ul li a:hover{color: red;text-decoration:none}
.block-content-none-bg i{
  color: #00AB4F;
    font-weight: 700;
}
.box-note-title {
    font-size: 26px;
    margin: 10px 0 13px;
    color: #ff3300!important;
    text-align:center
}