JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
        <div class="pic">
            <img src="https://www.storm.mg/images/logo.svg" alt="">
        </div>
        <nav>
          <a href="#"><img src="https://www.storm.mg/images/logo_new7.svg" alt=""></a>
          <a href="#"><img src="https://www.storm.mg/images/1percentstyle.svg" alt=""></a>
          <a href="#"><img src="https://www.storm.mg/images/vip_logo.png" alt=""></a>
          <a href="#">新聞</a>
          <a href="#">評論</a>
          <a href="#">財經</a>
          <a href="#">生活</a>
          <a href="#">下班經濟學</a>
        </nav>
    </div>

    <div class="title">
        <h3><a href="#">國際</a></h3>
        <p>致死率最高75%，目前沒有藥物或疫苗！印度喀拉拉邦爆發「立百病毒」，目前已知兩死</p>
    </div>
      
    
    <div class="content">
        <div class="hot-new">
            <h3>熱門新聞</h3>
            <ol>
                <li><a href="#"><span>1</span>先生走了，他的兄弟姐妹都可以共享遺產！專家：夫妻間贈與財產免稅，一定                  要善用<br>鄭文在</a></li><hr>
                <li><a href="#"><span>2</span>幕後》早想自保！被請辭的新竹副市長蔡麗清　在高虹安公文上留下神秘4個字                  <br>林庭瑤</a></li><hr>
                <li><a href="#"><span>3</span>侯友宜支持度逼近3成穩居第二？黃揚明分析2份民調樣本結構：國民黨別高興                  太早<br>王德蓉</a></li><hr>
                <li><a href="#"><span>4</span>風評：高虹安到底有什麼問題？<br>主筆室</a></li><hr>
                <li><a href="#"><span>5</span>幕後》吳欣岱將宣布參選　民進黨暗中評估高嘉瑜恐失港湖立委<br>黃信維
                </a></li><hr>
                <li><a href="#"><span>6</span>人物》如何和高虹安結緣、反目　控新竹市長男友干政的「老頑童」錢康明炸
                裂政壇<br>唐筱恬</a></li><hr>
                <li><a href="#"><span>7</span>巴西蛋有塗蠟可保存4個月？游淑慧揭衛生局稽查結果：事情大條了<br>王德
                蓉</a></li><hr>
                <li><a href="#"><span>8</span>幕後》鎖喉高虹安、踢館「民眾堂」　民進黨「項莊舞劍」在布另一個局<br>
                黃信維</a></li><hr>
                <li><a href="#"><span>9</span>民眾黨內參民調僅柯文哲支持度下滑　媒體人分析：單獨操作棄保優勢流失
                <br>王德蓉</a></li><hr>
                <li><a href="#"><span>10</span>柯文哲推胞妹選立委向高虹安叫牌？黃揚明斷言一定落選：民眾黨的招牌已毀
                <br>許詠晴</a></li><hr>
            </ol>
           ...

CSS

*{
    padding:0;
    margin:0;
    text-decoration:none;
  }
  .header{
  }
  .header .pic{
    text-align: center;
    padding: 10px;
  }
  .header .pic img{
    width: 200px;
  }
  .header nav{
    text-align: center;
  }
  .header nav a{
    display: inline-block;
    margin: 0 10px;
    font-size: 24px;
  }
  .header nav a img{
    width: 100px;
  }
  .title{
    
  }
  .title h3 a{
    font-size:24px;
    margin:5px 10px;
    display:inline-block;
  }
  .title p{
    text-align:center;
    font-size:18px;
    font-weight:600;
  }
  .content{
    margin:10px;
  }
  .content .hot-new{
    float:right;
    width:30%;
  }
  .content .hot-new h3{
    font-size:24px;
    color:red;
    padding:5px;
  }
  .content .hot-new ol{
    list-style:none;
    padding:0 5px;
  }
  .content .hot-new ol span{
    display:inline-block;
    color:red;
    margin-right:10px;
    font-size:22px;
    font-weight:800;
  }
  .content .hot-new ol li{
    margin-bottom:5px;
  }
  .content .hot-new ol li a{
    color:#000;
    font-weight:600;
  }
  .content .wrap img{
    width:60%;
    margin-bottom:10px;
  }
  .content .wrap p{
    padding:10px;
  }
  .article img{
    width:60%;
    padding:10px;
  }
  .article p{
    padding:5px 10px;
  }