JSFiddle - React, Tailwind, and code Playground

by chroma2887

HTML

<!DOCDYPE HTML>
<!--原始網站 https://new7.storm.mg/article/4889337-->
<html>
<head>
</head>
<div>
<div class="main_logo">
 <a href="https://new7.storm.mg/">
 <img src="https://www.storm.mg/images/logo_new7.svg" width=20% ; >
 </a>
</div>
<span class="nav_content">
<ul>
<li><a href="https://new7.storm.mg/category/k248039" class="nav_URL navfont">政策盤點</a></li>
<li><a href ="https://new7.storm.mg/category/k320014"  class="nav_URL navfont">透明政府</a></li>
<li><a href="https://new7.storm.mg/category/k364832" class="nav_URL navfont">財經熱點</a></li>
<li><a href="https://new7.storm.mg/category/k364837" class="nav_URL navfont">社會轉角</a></li>
<li><a href="https://new7.storm.mg/specialtopic" class="nav_URL navfont">深度專題</a></li>
<li><a href="https://new7.storm.mg/category/k444226" class="nav_URL navfont">2024台北Computex</a></li>
<li><a href="https://new7.storm.mg/category/k205747" class="nav_URL navfont">歷史新新聞</a></li>
<li><a href="https://new7.storm.mg/topic" class="nav_URL navfont">時事焦點</a></li>
<a href="https://www.storm.mg/premium">
<img src="https://new7.storm.mg/images/vip_logo.png" >
</a>
</ul>
</span>
</div>
<div class="container">
<body>
<h1 align = center>
隨《花蓮太平洋溫泉季》的裊裊輕煙，走入秋季湯花之戀
</h1>
<hr class = "bordercolor">
<p align = center> 
<a class="URL-link" href="https://www.storm.mg/authors/388842/%E9%99%B3%E4%BF%90%E5%AE%89">陳俐安</a>
2023-10-26 11:54  5922 
</p>
<img class="container-img" src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2023/10/26/20231026-114302_U24247_M900773_6b74.jpg?itok=bryLhgXO"/>
<!-- -->
<p class = "photoexplanation">
如果說台北的秋天，像一個享受獨處的人，花蓮的秋天，則充滿了溫暖與幸福。（圖／花蓮縣文化局官網）
</p>
<p>
當城市的氣溫開始微涼 ; 當樹梢的枝葉浮現紅、黃、橘三種色彩 ; 當花東縱谷間灑落的陽光，褪去猛烈，而變得溫柔可人 ; 當花蓮瑞穗溫泉公園，亮起了一盞盞燈籠...，大自然總以最浪漫的方式，宣告秋天正式到來。如果說台北的秋天，像一個享受獨處的人，花蓮的秋天，則充滿了溫暖與幸福。
</p>
<h3...

CSS

.container{
  padding:25px;
  max-width:1000px;
  border:1px solid black;
}  
.container-img{
  max-width:100%;
  height:auto;
}

.photoexplanation {
  color: gray; 
  border:1px solid red;
  position:relative;
  bottom: 15px;
  
}
.paragraph{
  color: #c6a300 ;
  
}
.bordercolor{
  border: solid,1px,#c6a300;
  border-left:none;
  border-right:none;
  border-bottom:none
 }
.URL-link:link{
  color:blue;
}
.URL-link:visited{
  color:purple;
}
.URL-link:hover{
  color:#ff4500;
}
.URL-link:active{
  background-color:#ff4500;
  color:white;
}

.nav_URL:limk{
  color:black;
}
.nav_URL:visited{
  color:black;
}
.nav_URL:hover{
 color:red;  
}
.nav_URL:active{
  background-color:gray;
}

.navfont{
  color:black;
  text-decoration:none;
  vertical-align:middle;
}



.main_logo{
  width:100%;
  border:1px solid blue;
  text-align: center;
  margin:57px 0 20px 0;
}
.nav_content{
  max-width:1170px;
  display:block;
  border:1px solid gray;
   }

.nav_content li{
   list-style-type:none;
   display:inline-block;
   font-size:16px;
   border:1px solid gray;
   justify-content: center;
   align-items: center;
   color:black;
   
  }    
.nav_content img{
  display:inline-block;
  width:64px;
  border:1px solid gray;
  justify-content: center;
  vertical-align: middle;
   
}
.add {
  display:flex;  
 justify-content: center;
 font-size:25px;
}

.extrareading{
  border:1px solid green;
  max-width:960px;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;  
  align-items:start;
  justify-content:space-around;
  }
.item {
  border:1px solid indigo;
  width:200px;
  
  
}  
.item img {
  max-width:100%;
  height:auto;
}  
.item a{
  text-decoration: none; /* 去掉連結的下劃線（可選） */
  color: inherit; /* 繼承文本顏色（可選） */
  }
  
.hotreading{
  background-color:#ddd;
  display:flex;
  justify-content: center;
  font-size:25px;
}  
.hotlist{
  background-color:#ddd;
  display:flex;
  border:1px solid orange;
  justify-content:center;
  align-items:center;
  padding:10px;
  
}
.hotlist_top_3{
...