JSFiddle - React, Tailwind, and code Playground

by IreneQiu

HTML

<div class="header">
<header>
<a href="https://www.storm.mg/"><img src="https://www.storm.mg/images/logo_CT.svg"></a>
</header>
</div>
<hr/>
<nav>
  <a href="https://new7.storm.mg/"><img src="https://www.storm.mg/images/logo_new7.svg"/></a>
  
  <a href="https://onepercent.storm.mg/"><img src="https://www.storm.mg/images/1percentstyle.svg"></a>
  
  <a href="https://www.storm.mg/premium"><img src="https://www.storm.mg/images/vip_logo.png"></a>
  
  
  <a href="" class=nav-list>新聞</a>
  <a href="" class=nav-list>評論</a>
  <a href="" class=nav-list>財經</a>
  <a href="" class=nav-list>生活</a>
  <a href="" class=nav-list>下班經濟學</a>
</nav>

<hr/>

<h1>《快訊》家長崩潰狂喊「別取消紙本」：父母的浩劫與末日　《巧連智月刊》直球回應了！</h1>

<p>2024-01-30 10:21</p>
<br/>
<div class="both">
<main style="background-color:white">
<img src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2024/01/30/20240130-090432_U29119_M929331_f293.png?GFX6x6T4064WgnbpEa7T5dEtVj3.mt1L&itok=t4_6FXcG" alt="巧虎、琪琪" class="main-img">
<p class="img_dec">網紅「永康曾咖郎」透露「紙本有利育兒」的5大優勢，而兩性作家柳喪彪也分享巧連智月刊的最終訂購方法。（圖／翻攝自FB／巧虎好朋友巧連智）</p>
<article>
<p class="text">深受家長、孩童喜愛的《巧連智月刊》昨（29）日突宣布自3月1日起將停止受理訂閱和續訂，讓許多書迷、父母直呼崩潰。對此，網紅「永康曾咖郎」就透露了「紙本有利育兒」的5大優勢，而兩性作家柳喪彪也分享了巧連智月刊的最終訂購方法，此外，《巧連智月刊》對於家長們的崩潰心聲，也做出回應了！</p>

<p class="text">《巧連智月刊》宣布停刊後，大批家長直呼崩潰，就連公民教師黃益中也發文直言：「我們就是不希望小孩盯著電子產品，才特別訂閱紙本的巧連智月刊啊！大人不看紙本我可以理解也可以接受，但小小朋友的眼睛跟腦部還在發育，有每個月紙本書籍的陪伴，不只可以學到很多知識，而且教導孝順、禮貌、友愛、分享這些道理，巧虎的話比家長還有效！」</p>

<p class="text">對此，《巧連智月刊》官方回應部分家長說道：「收到您的訊息了，會將您的回饋轉告給相關單位參考。」且說每位粉絲的意見對他們來說都很重要。</p>

<h3>「紙本」5大好處</h3>
<p class="text">而在停刊消息曝光後，網紅「永康曾咖郎」在粉專以「家長浩劫」為題發文直呼，巧連智月刊停止受理訂閱，猶如爸爸媽媽的浩劫與末日，他細述家長育兒時，「紙本」帶來的5大好處，像是紙本不像手機或平板經常沒電，無須經常擔心要先充電，如下……。</p>

<ol class="text">
<li>貼紙可以撕撕貼貼（巧連智的紙質很特別不太會破），那個要拿衛生紙外觀的貼紙去貼巧虎嘴巴髒髒地方的玩法無可取代！</li>
<li>紙本不會沒電，平板常常忘記充電要拿給小朋友才發現打不開。</li>
<li>紙本開車坐後座玩很方便，平板或手機還要考慮怎麼擺怎麼放，紙本就放小孩腳上就好了。</li>
<li>紙本不怕摔，兩歲小孩平均每五秒會讓手上的東西掉到地上一次，不只犀牛盾、恐龍盾都救不了！</li>
<li>最重要的是紙本不會需要徵收爸爸的手機！如果都改線上版，每次出去臨時要用，爸爸就得交出手機給小孩用。</li>
</ol>

<img...

CSS

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.header{
  width: 150px;
  margin: 0 auto;
}

nav{
  display:flex;
  justify-content:center;
  align-items:center;
}

nav a> img{
  width:85px;
  height:25px;
  display:inline-block;
  margin:10px;
}

/*nav >a{
  display:inline-block;
  width:85px;
  height:25px;
  margin:5px;
  text-decoration:none;
  text-align:center;
}*/

.nav-list{
  display:inline-block;
  width:85px;
  height:25px;
  margin:5px;
  text-decoration:none;
  text-align:center;
}

.img_dec{
  color:#999;
  font-size:12px;
}

.both{
  display:inline-block;
  position:relative;
}

main{
  width:calc(100% - 200px - 30px);
}

.main-img{
  width:100%;
  margin:10px;
}

aside{
  width:200px;
  position:absolute;
  top:0;
  right:0;
}

aside  ol >li{
  padding:10px;
} 

a{
  color:black;
  font-weight:bold;
  text-decoration: none;
  
}

a:hover{
  text-decoration:underline;
}

h3 {
  color:red;
}

.text{
  padding:25px;
}