JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
  <h1 style="text-align: center; height: 0;">自學網頁の嬰兒教材：第3課 ── 網頁排版</h1>

  <div class="header">
    <div class="sub-nav">
      <a href="" class="logo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/The_Storm_Media_Logo.svg/1200px-The_Storm_Media_Logo.svg.png" alt=""></a>
      <a href="" class="member"><i class="fa-regular fa-user"></i></a>
    </div>
    <div class="main-nav">
      <div class="head">
        <a href="" class="search"><i class="fa-solid fa-magnifying-glass"></i></a>
        <a href="" class="logo"><img src="https://www.storm.mg/images/logo_new7.svg" alt=""></a>
      </div>
      <div class="selector">
        <a href="">政策盤點</a>
        <a href="">透明政府</a>
        <a href="">財經熱點</a>
        <a href="">社會轉角</a>
        <a href="">深度專題</a>
        <a href="">建商獻金大戶</a>
        <a href="">歷史新新聞</a>
        <a href="">時事焦點</a>
        <a href=""><img src="https://new7.storm.mg/images/vip_logo.png" alt=""></a>
      </div>
    </div>
  </div>
  <div class="article">
    <div class="title">
      <div class="tags">
        <a href="" class="tag">政策盤點</a>
        <a href="" class="tag">社會轉角</a>
      </div>
      <h1>「跟幫派搶人」有多難？他們8年拉回無數觸法少年，直指台灣教育困境：資源在哪裡？
        <span class="source">
          <a href="https://new7.storm.mg/article/4979578" target="_blank">文章來源：https://new7.storm.mg/article/4979578</a>
        </span>
      </h1>

      <div class="info">
        <a href="">謝孟穎</a>
        <span>2024-01-11 09:10</span>
        <span>18866(點閱數)</span>
        <a href="" class="sponsor">贊助本文</a>
      </div>
    </div>
...

CSS

* {
  padding: 0;
  margin: 0;
}

.sub-nav {
  width: 100%;
  border-bottom: 1px solid #e5e5e5;
  box-sizing: border-box;
  padding: 10px 200px;
}

.sub-nav .logo {
  float: left;
}

.sub-nav img {
  width: auto;
  height: 30px;
  vertical-align: top;
}

.sub-nav .member {
  float: right;
}

.sub-nav .member i {
  display: inline-block;
  font-size: 30px;
}

.sub-nav::after {
  content: "";
  display: block;
  clear: both;
}

.main-nav {
  text-align: center;
  width: 1200px;
  margin: 50px auto 0;
}

.main-nav .head {
  position: relative;
  padding-bottom: 10px;
}

.main-nav .search {
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 10px;
}

.main-nav .logo {
  display: inline-block;
}

.main-nav .logo img {
  width: 150px;
}

.main-nav .selector {
  padding: 10px 0;
  margin: auto;
  border-top: 1px solid #e5e5e5;
  border-bottom: 3px double #e5e5e5;
}

.main-nav .selector a {
  display: inline-block;
  margin: 10px;
  vertical-align: middle;
}

.main-nav .selector img {
  width: 80px;
  vertical-align: middle;
}

.main-nav .selector a:hover {
  color: #d12229;
  transition: 1s;
}

.article {
  background-color: #fff;
  width: 900px;
  padding: 20px;
  box-sizing: border-box;
  margin: 50px auto 0;
}

div,
img,
iframe {
  width: 100%;
}

h1 {
  font-size: 32px;
  font-weight: 600;
  color: #000;
  text-align: center;
  line-height: 2;
  margin-top: 0;
}

h2 {
  font-size: 26px;
  font-weight: 600;
  color: #9f7f1a;
}

p {
  font-size: 18px;
  color: #3b3b3b;
}

a {
  text-decoration: none;
  color: #3b3b3b;
}

h2,
h3,
p,
blockquote {
  line-height: 2;
  text-align: justify;
}

.tags {
  text-align: center;
}

.tags .tag {
  color: #000;
  padding: 5px 10px;
  border: 1px solid #000;
}

.tags .tag:hover {
  background-color: #d4af37;
  border-color: #d4af37;
  color: #fff;
  transition: 1s;
}

.title span.source {
  display: block;
  font-size: 14px;
}

.info {
  text-align: center;
  margin: 20px 0;
}

.info a,
.info span {
  display:...