homework-baitap1/tuyenvv-baitap1.html at main · vantuyenzero/homework-baitap1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="h-screen bg-white">
    <!-- Phần hình ảnh -->
    <div class="container mx-auto bg-[#d9d9d9] md:bg-[#ea00e0] xl:bg-[#181616]">
      <div class="columns-1 space-y-4 p-4 md:columns-2 xl:columns-3">
        <div class="relative w-full pt-[150%]">
          <img class="absolute left-0 top-0 h-full w-full object-cover" src="https://i.ibb.co/qYZkjVn/img-demo-02.jpg" />
        </div>
        <div class="relative w-full pt-[150%]">
          <img class="absolute left-0 top-0 h-full w-full object-cover" src="https://i.ibb.co/kS2QWm3/img-demo-04.jpg" />
        </div>
        <div class="relative w-full pt-[150%]">
          <img class="absolute left-0 top-0 h-full w-full object-cover" src="https://i.ibb.co/KbxFnQL/img-demo-03.jpg" />
        </div>
        <div class="relative w-full pt-[150%]">
          <img class="absolute left-0 top-0 h-full w-full object-cover" src="https://i.ibb.co/dbCNFXj/img-demo-01.jpg" />
        </div>
      </div>
    </div>
    <div class="bg-red-600 h-full w-[100px] hidden xl:block">dđ</div>

    <div class="container mx-auto bg-[#d9d9d9] md:bg-[#ea00e0] xl:bg-[#181616]"></div>
    <!-- Text mẫu -->
    <div class="mt-[5px] h-[50px] bg-[#d9d9d9] px-3 text-right font-bold md:mt-1.5 md:h-[100px] md:text-center xl:mt-2.5 xl:h-[120px] xl:text-left">Gõ text</div>

    <!-- Khoảng cách dư để nhìn dưới -->
    <div class="h-28"></div>
  </body>
</html>