JSFiddle - React, Tailwind, and code Playground

by Tìm ở đây Khoá học CNTT

HTML

<div class="header">
  <h1>Website Tìm Ở Đây</h1>
</div>

<div class="topnav">
  <a href="#">Trang chủ</a>
  <a href="#">Tin tức</a>
  <a href="#">Thủ thuật</a>
</div>

<div class="row">
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
  
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
  
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Tạo kiểu cho tiêu đề*/
.header {
  background-color: dimgrey;
  color: chartreuse;
  padding: 20px;
  text-align: center;
}

/* Tạo kiểu cho thanh điều hướng */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* tạo kiểu cho liên kết */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* thay đổi màu khi di chuột */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/*Tạo ba cột bằng nhau xếp bên cạnh nhau */
.column {
  float: left;
  width: 33.33%;
  padding: 15px;
}

/* Xóa float khác sau các cột */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Bố cục linh hoạt: ba cột xếp chồng lên nhau thay vì cạnh nhau khi màn hình 
có chiều rộng dưới 600px */
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}