JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://www.storm.mg/"><img style="width:25%;display:block;margin:auto;" src=https://www.storm.mg/images/logo.svg></a>

<div class="slide">
<nav><ul>
<li><a href="https://new7.storm.mg/" target="_blank"><img src="https://www.storm.mg/images/logo_new7.svg"></a></li>
<li><a href="https://onepercent.storm.mg/" target="_blank"><img src="https://www.storm.mg/images/1percentstyle.svg"></a></li>
<li><a href="https://www.storm.mg/premium" target="_blank"><img  src="https://www.storm.mg/images/vip_logo.png"></a></li>
<li><a href="">新聞</a></li>
<li><a href="">評論</a></li>
<li><a href="">財經</a></li>
<li><a href="">生活</a></li>
<li><a href="">下班經濟學</a></li>
<li><a href="https://events.storm.mg/campaign/ai-award/forum.html" style="color:dodgerblue" target="_blank">AI醫療領航</a></li>
<li><a href="https://events.storm.mg/campaign/taishin2024/" style="color:dodgerblue" target="_blank">在地英雄</a></li>
</ul></nav>
</div>
<br>

<div id="intro">
<a class="categorization" href="https://www.storm.mg/category/118">政治</a>
<h1>im.B詐騙案》「司法淪政治工具」　黃國昌點名：71億流進哪個政客口袋要查清楚</h1>
<div class="info">
<a href="https://www.storm.mg/authors/429334/%E9%99%B3%E6%98%8E%E9%81%A0">陳明遠</a>
<a href=""><button style="margin:5px">+追蹤</button></a>
<p style="display:inline;letter-spacing:1px;word-spacing:5px;">2024-08-01 23:27 5556人氣</p></div>
<img style="width:80%;" src="https://image.cache.storm.mg/styles/smg-800x533-fp-wm/s3/media/image/2024/07/16/20240716-052218_U29087_M970155_556b.JPG?MqoMf7wXCAedgFQLDW2PTH3Kyh.wUusm&itok=Msl8gq0P">
<p style=" width: 80%;font-size:12px;margin-top:0;color: gray">
針對im.B詐騙案，民眾黨立法院黨團總召黃國昌表示，71億不法所得流向哪裡，主嫌始終避重就輕，讓被害人無處求償。（資料照，陳昱凱攝）
</p>
</div>

<div id="paragraph">
<div class="hot">
<p style="color:slateblue">熱門新聞</p><hr>
<a class="num" href="https://www.storm.mg/article/5238779"><span style="color: slateblue;">1</span></a>
<div style="margin-left:40px">
<a class="content"...

CSS

@import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Hand:wght@400..700&family=Noto+Sans+TC:wght@100..900&display=swap');
*{
  padding:0;
}
body{
  font-family: "Noto Sans TC", sans-serif;
  letter-spacing: 2px;
  background-color: rgb(240, 240, 240);
}
div.slide{
  border-top: 2px solid lightgray;
  border-bottom: 2px solid lightgray;
  margin-top: 20px;
  box-sizing:border-box;
}
div.slide li{
  display:inline;
}
div.slide img{
  width: 8%;
  vertical-align:middle;
}
div.slide a{
  margin: 5px;
  text-decoration: none;
  color:black;
  font-size:14px;
}

a.categorization{
  color:black;
  border-left: 5px dodgerblue solid;
  font-weight: bold;
  padding-left: 8px;
}
a.categorization:link{
  text-decoration: none;
}
a.categorization:hover{
  text-decoration: underline black 2px;
}
a.categorization:active{
  text-decoration: none;
  color: black;
  background-color: lightgray;
}



h1{
  font-weight: 500;
  font-size: 25px;
}
div.info{
  word-spacing: 10px;
  font-weight: 450;
  font-size: 15px;
  margin-bottom: 5px;
}
button{
  width: 70px;
  height: 25px;
  margin: 2px;
  background-color: white;
  border-radius: 5px;
  border-width: 1px;
  border-color: rgb(210, 210, 210);
  border-style: solid;
  cursor: pointer;
}
button:hover{
  background-color: rgb(200, 200, 200);
  color: white;
}
button:active{
  background-color: rgb(210, 210, 210);
}
div.info a{
  text-decoration: none;
  color: dodgerblue;
}
div.info a:hover{
  text-decoration: underline dodgerblue;
}
div.info a:active{
  text-decoration: underline slateblue;
  color: slateblue;
}
@media (min-width:600px) {
  
 div.main{
  background-color: white;
  margin: 5px 35% 5px 5px;
  padding: 20px;
  text-align: justify;
  }
 div.hot{
  float: right;
  width: 30%;
  padding: 14px;
  }
}
@media (max-width:599px) {
  div.hot{
    display: none;
  }
  div.main{
    background-color: white;
    padding: 14px;
    margin: 5px;
    overflow: auto;
  }
  div.slide{
    display:none;
  }
}

a.num{
...