Init HTML

Xem demo

HTML

Ở đây mình dùng Grid system của Bootstrap để chia cột cho bảng giá.

<div class="container entry-content pricing-table-container">
    <div class="row">
        <div class="col-md-4">
            <div class="pricing-table">
                <div class="pricing-table-header text-center">
                    <h3>
                        <a href="https://chancanvas.com/dich-vu/thiet-ke-logo/">Thiết Kế Logo</a>
                    </h3>
                    <hr>
                    <h4>Từ 300.000 ₫</h4>
                    <hr>
                </div>
                <div class="pricing-table-body">
                    <ul class="custom-list-style">
                        <li>
                            <span class="pink glyphicon glyphicon-ok-circle m-r-1"></span> 1 – 3 phương án
                        </li>
                        <li>
                            <span class="pink glyphicon glyphicon-ok-circle m-r-1"></span> Hệ thống họa tiết trang trí
                        </li>
                        <li>
                            <span class="pink glyphicon glyphicon-ok-circle m-r-1"></span> Chỉnh sửa không giới hạn
                        </li>
                        <li>
                            <span class="pink glyphicon glyphicon-ok-circle m-r-1"></span> Bàn giao bản gốc, hình ảnh
                        </li>
                        <li>
                            <span class="pink glyphicon glyphicon-ok-circle m-r-1"></span> Bao gồm Hồ Sơ Logo
                        </li>
                    </ul>
                    <p class="text-center pricing-table-contact">
                        <a class="main-banner-btn" href="https://chancanvas.com/lien-he/#contact-form">
                            <span class="glyphicon glyphicon-fire m-r-1"></span> Liên Hệ Ngay </a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="pricing-table">
                <div class="pricing-table-header text-center">
                    <h3>
                        <a href="https://chancanvas.com/dich-vu/bo-nhan-dien-thuong-hieu/">
                            Bộ Nhận Diện Thương Hiệu
                        </a>
                    </h3>
                    <hr>
                    <h4>Từ 1.000.000 ₫</h4>
                    <hr>
                </div>
                <div class="pricing-table-body">
                    <ul class="custom-list-style">
                        <li>
                            <span class="pink glyphicon glyphicon-ok-circle m-r-1"></span> Bao gồm Logo
                        </li>
                        <li>
                            <span class="pink glyphicon glyphicon-ok-circle m-r-1"></span> Diễn hoạt Logo
                        </li>
                        <li>
                            <span class="pink glyphicon glyphicon-ok-circle m-r-1"></span> Hệ thống nhận diện văn phòng
                        </li>
                        <li>
                            <span class="pink glyphicon glyphicon-ok-circle m-r-1"></span> Brochure, Voucher, Banner, v.v…
                        </li>
                        <li>
                            <span class="pink glyphicon glyphicon-ok-circle m-r-1"></span> Các sản phẩm khác theo yêu cầu
                        </li>
                    </ul>
                    <p class="text-center pricing-table-contact">
                        <a class="main-banner-btn" href="https://chancanvas.com/lien-he/#contact-form">
                            <span class="glyphicon glyphicon-fire m-r-1"></span> Liên Hệ Ngay </a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="pricing-table">
                <div class="pricing-table-header text-center">
                    <h3>
                        <a href="https://chancanvas.com/dich-vu/thiet-ke-website/">Thiết Kế Website</a>
                    </h3>
                    <hr>
                    <h4>Từ 1.500.000 ₫</h4>
                    <hr>
                </div>
                <div class="pricing-table-body">
                    <ul class="custom-list-style">
                        <li>
                            <span class="pink glyphicon glyphicon-ok-circle m-r-1"></span> Bao gồm cài đặt website, VPS
                        </li>
                        <li>
                            <span class="pink glyphicon glyphicon-ok-circle m-r-1"></span> Tài liệu hướng dẫn sử dụng
                        </li>
                        <li>
                            <span class="pink glyphicon glyphicon-ok-circle m-r-1"></span> Cấu hình trang, dữ liệu mẫu
                        </li>
                        <li>
                            <span class="pink glyphicon glyphicon-ok-circle m-r-1"></span> Cấu hình SEO
                        </li>
                        <li>
                            <span class="pink glyphicon glyphicon-ok-circle m-r-1"></span> Bảo hành, sửa lỗi <span class="underline">01</span> tháng đầu tiên
                        </li>
                    </ul>
                    <p class="text-center pricing-table-contact">
                        <a class="main-banner-btn" href="https://chancanvas.com/lien-he/#contact-form">
                            <span class="glyphicon glyphicon-fire m-r-1"></span> Liên Hệ Ngay </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

Tinh chỉnh lại khoảng cách.

.pricing-table-container {
	margin-top: 25px;
}

.pricing-table {
	margin-bottom: 30px;
	background-color: #fff;
	padding-bottom: 30px;
	border-radius: 5px;
	min-height: 460px;
	transition: all .5s ease;
}

.pricing-table:hover {
	box-shadow: 0 10px 30px rgba(0,0,0,.07);
	transform: translateY(-10px);
}

.pricing-table-header {
	padding-top: 25px;
}

.pricing-table-header h3,.pricing-table-header h4 {
	margin-top: 0!important;
	margin-bottom: 0!important;
	padding-left: 15px;
	padding-right: 15px;
}

.pricing-table-header hr {
	border-top: 2px dashed var(--bg-color);
}

.pricing-table-body {
	padding: 15px 50px;
}

.pricing-table-body ul li {
	margin-bottom: 8px;
}

@media (max-width:991px) {
	.pricing-table {
		min-height: auto;
	}
}

@media (max-width:480px) {
	.pricing-table-body {
		padding: 15px 15px;
	}
}

.pricing-table-contact {
	margin-top: 50px;
}

Đối với Bootstap phiên bản mới hơn, các bạn có thể dùng Card để làm trang Bảng Giá.

Chúc các bạn thành công!