JSFiddle - React, Tailwind, and code Playground

by thaotrinh

HTML

<div class="pricing_table">
        <ul>
            <li>Cơ bản</li>
            <li>20 000 VND/Tháng</li>
            <li>Dung lượng 200MB</li>
            <li>Băng thông 20GB</li>
            <li>Sub domain 20</li>
            <li>MySQL5 2</li>
            <li>Park Domain 2</li>
            <li>Addon Domain 2</li>
            <li></li>
            <li><a href="http://free.bendoi.vn/" class="buy_now">Mua ngay</a></li>
        </ul>
<ul>
            <li>Doanh nghiệp</li>
            <li>50 000 VND/Tháng</li>
            <li>Dung lượng 500MB</li>
            <li>Băng thông 50GB</li>
            <li>Sub domain 50</li>
            <li>MySQL5 5</li>
            <li>Park Domain 5</li>
            <li>Addon Domain 5</li>
            <li></li>
            <li><a href="http://free.bendoi.vn/" class="buy_now">Mua ngay</a></li>
        </ul>
<ul>
            <li>Nâng cao</li>
            <li>100 000 VND/Tháng</li>
            <li>Dung lượng 1000MB</li>
            <li>Băng thông 100GB</li>
            <li>Sub domain 100</li>
            <li>MySQL5 10</li>
            <li>Park Domain 10</li>
            <li>Addon Domain 10</li>
            <li></li>
            <li><a href="http://free.bendoi.vn/" class="buy_now">Mua ngay</a></li>
        </ul>        
</div>

CSS

.pricing_table {
    border:1px solid #c4cbcc;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    outline:7px solid #f2f3f3;
    float:left;
}
/*Tạo dáng cho các cột*/
.pricing_table ul {
    list-style:none; /* Loại bỏ các bullet */
    float:left; /* Float lists sang trái */
    width:147px; /* Chiều rộng của mỗi cột */
    margin:0;
    border:1px solid #f2f3f3; /*Thêm một chút viền cho đẹp mắt^^ */
    padding:5px;
    text-align:center; /* Canh giữa cho văn bản */
    background-color:#FFF; /* Màu nên trắng */
}
/*Hiệu ứng hover khi rê chuột vào bảng*/
.pricing_table ul:hover {
    -webkit-transform: scale(1.1); /* Chuyển đổi cột với một quy mô là 1,1 -> làm tăng 10% kích thước ban đầu. */
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -moz-box-shadow:3px 5px 7px rgba(0,0,0,.7); /* Tạo bóng cho hộp */
    -webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.7);
    box-shadow:3px 5px 7px rgba(0,0,0,.7);
    cursor:pointer; /* Thay đổi hiệu ứng trỏ chuột */
}
/*Tạo dáng cho mỗi list (danh sách)*/

.pricing_table ul li {
    border-bottom:1px dashed #cfd2d2;
    padding:10px 0;
}
/*Tạo dáng cho các dòng*/
.pricing_table ul li:first-child { /* Hàng đầu tiên cần phải có phông chữ lớn hơn và được nhấn mạnh. */
    font-size:18px;
    font-weight:bold;
}
.pricing_table ul li:nth-child(2) { /* Trên hàng thứ hai, chúng ta cần một nền màu tối hơn. */
    background:#fbfbfb;
}
.pricing_table ul li:nth-child(3) { /* Với hàng thứ 3, chúng ta cần một phông chữ nhỏ hơn nhưng được nhấn mạnh. */
    font-size:12px;
    font-weight:bold;
}
.pricing_table ul li:nth-child(n+4) { /* Với các hàng còn lại chúng ta cần phải thiết lập kích thước phông chữ là 14pixels. */
    font-size:14px;
}
.pricing_table ul li:last-child a { /* Trên dòng cuối cùng, chúng ta sẽ để thêm một liên kết (ví dụ như nút submit chẳng hạn). */
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border:1px solid #c4cbcc;
   ...