JSFiddle - React, Tailwind, and code Playground

by etai200

HTML

<header>
 <h1>風傳媒</h1>
 <hr>
       <nav>
        <ul>
            <li><a href="#"><img src="https://www.storm.mg/images/logo_new7.svg"></a></li>
            <li><a href="#"><img src="https://www.storm.mg/images/1percentstyle.svg"></a></li>
            <li><a href="#"><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="#" style="color:red">一日總編輯</a></li>
            <li><a href="#" style="color:red">許願未來</a></li>
        </ul>
    </nav>
    <hr>
</header>
<body>
<h1>遊戲業也掀裁員潮！《Apex英雄》EA宣布「削減5%員工」　《星際大戰》新作告吹了</h1>
<section>
<div class="news">
<img src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2024/02/29/20240229-050146_U29135_M935977_071b.png?uuTH7bl.ipTJ4.Tw2rjJgTJNbJDmfBPY&itok=C4uaTRxq">
<p style="color:grey;font-size: 0.8rem;margin:0;">美國知名遊戲大廠藝電近日（Electronic Arts, 簡稱EA）也加入了裁員的行列（圖／翻攝自EA官網）</p>
<br>
<div class="article">
<p><a href="https://www.storm.mg/line/notify/logine" style="color:grey;" >[啟動LINE推播] 每日重大新聞通知</a></p>

<p>美國知名遊戲大廠藝電近日（Electronic Arts, 簡稱EA）也加入了裁員的行列，<b>宣布將裁減約5%的員工，以調整公司的辦公空間和終止一些預計不會盈利的遊戲開發計劃，</b>這意味著大約670名員工可能會失去工作。</p>
<p>EA的執行長安德魯·威爾森（Andrew Wilson）在一封給員工的信中表示，公司正在努力簡化運營流程，並將專注於為全球玩家提供更深入、更緊密連接的遊戲體驗。他相信，這次的組織調整將使公司能夠集中精力於最有潛力的領域，例如運動類遊戲和龐大的線上社群。</p>
<p>EA預計這次的裁員和重組將導致1.25億到1.65億美元的支出，主要用於縮減辦公空間和支付員工遣散費，並預計這一過程將在12月底前完成，同時，<b>未來將更加關注那些能夠吸引大量線上玩家並創造更多利潤的遊戲系列，</b>例如《Apex 英雄》、《戰地風雲》、《EA Sports FC》（前身為FIFA系列）和《模擬市民》等等。</p>
<p>此外，EA確認將停止開發一些看似沒有前景的遊戲項目，包括一款在2022年宣布的未命名《星際大戰》FPS遊戲，這些員工將被重新分配到其他遊戲項目的開發中。</p>
<p style="color:grey;">
  <span>（相關報導：</span>
  <a href="https://www.storm.mg/lifestyle/5035025"  style="color:grey;">遊戲巨頭也扛不住！Sony宣布「PlayStation」部門全球裁員900人　關閉倫敦所有工作室</a>
  <span>|</span>
  <a href=javascript:void(0);  style="color:grey;">更多文章</a>
  <span>）</span>
</p>
<p>
 ...

CSS

h2{
  color: red;
  font-size: 1.2rem;
}
body{
background-color: #f5f5f5;
font-family: Microsoft JhengHei;
padding: 0px 20px;
width: 1000px;
margin: 0 auto;
}
section{
  display: flex;
  justify-content: center;
  
}


a{
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}

header h1{
  background-image: url(https://www.storm.mg/images/logo.svg);
  background-repeat: no-repeat;
  background-position: center;
  text-indent: -9999px;
}
header img{
  height: 25px;
  width: 75px;
  }
  
header a{
 color: black;
 font-family: Microsoft JhengHei;
 font-size: 1.1rem;
 margin: 5px 5px;
}
header a:hover{
  text-decoration: none;
}

header li{
 display: inline;
}
header ul{
  display: flex;
}
.nes{
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.news img {
  max-width: 95%;
  max-height: 95%;
    -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.hot{
  max-width: 250px;
  margin: 0px 10px;
}
.hot a{
  color: black;
  font-size: 1.1rem;
}
.article{
  background-color: white;
  max-width: 600px;
  margin: 10px 10px;
  padding: 10px 40px;
  font-size: 1.2rem;
  
}