JSFiddle - React, Tailwind, and code Playground

by Brian8556

HTML

<!DOCTYPE html>
<!原始網頁link "https://www.storm.mg/article/5157436" -->
<html lang="zh-TW">
<body>
<div class="top_tag">
<a class="tags_link" href="/category/104">風生活</a>
<a class="tags_link" href="/category/23333">影音</a>
<a class="tags_link" href="/category/164654">下班經濟學</a>
<a class="tags_link" href="/video">風影音</a>
<a class="tags_link" href="/category/249576">下班經濟學影音</a>
</div>
<h1>【下班經濟學】3種超級水果降血壓！名醫教你不吃藥：遠離中風、腎衰竭！</h1>
<p>
<a class="mark"; style="color:#ff3838"; href="https://www.storm.mg/authors/137502/%E4%B8%8B%E7%8F%AD%E7%B6%93%E6%BF%9F%E5%AD%B8";>下班經濟學 </a>
<a class="mark2"; href="https://www.storm.mg/authors/137502/%E4%B8%8B%E7%8F%AD%E7%B6%93%E6%BF%9F%E5%AD%B8";>+ 追蹤 </a>
<span class="date" color:#333;>2024-06-14 18:00</span> 
<span style=color:#999;>  4091人氣</span>
<a class="mark3"; href="https://www.storm.mg/authors/137502/%E4%B8%8B%E7%8F%AD%E7%B6%93%E6%BF%9F%E5%AD%B8";>圖 贊助本文 </a>
<a class="mark4"; href="https://www.storm.mg/authors/137502/%E4%B8%8B%E7%8F%AD%E7%B6%93%E6%BF%9F%E5%AD%B8";> 简 </a>
<a class="mark5"; href="https://www.storm.mg/authors/137502/%E4%B8%8B%E7%8F%AD%E7%B6%93%E6%BF%9F%E5%AD%B8";> f 分享0 </a></p>
<!Line、fb、其他分享圓形按鈕有點難做!>

<iframe width="820" height="491" src="https://www.youtube.com/embed/8jE6TXXKECk" title="【健康】3種超級水果降血壓！名醫教你不吃藥：遠離中風、腎衰竭！ft.劉博仁醫師｜下班經濟學467" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>">
<!影片右鍵點選複製嵌入程式碼-->
<p class="first_p">你知道高血壓真的有方法可以逆轉不吃藥嗎？今天邀請到名醫劉博仁來告訴大<br>家，高血壓的併發症，不僅眼睛會出現病變、腎衰竭，更可怕的中風、心肌梗<br>塞都會隨之而來！擺脫高血壓血壓該怎麼吃？一起來看看！</p>
<pre><br></pre>
<a class="start"style="color:gray;" href="https://www.storm.mg/line/notify/login">[啟動LINE推播] 每日重大新聞通知</a>
<pre><br></pre>
<h2...

CSS

html{ font-family: sans-serif; font-size: 17px; }
div{ border-left: 10px solid #4aacc6; padding: 5px 0 5px 10px; word-spacing: 7px; margin-bottom: 10px; font-weight: bold; }
a.tags_link:link { text-decoration: none; color: black; }
a.tags_link:hover { text-decoration: underline; }
a.mark:link{ text-decoration: none; }
a.mark:hover { text-decoration: underline; }
h1{ margin: 0; padding: 0; border: 0; font-size: 26px; color:#3b3b3b; text-indent: 7px; }
body { margin: 5px 50px; }
p{ margin: 25px 0; font-weight: 550; }
a.mark2:link, a.mark2:visited { text-decoration: none; border-radius: 5px; min-width: 50px; padding: 5px 15px;border: 1px solid #ccc; text-align: center; color: #3b3b3b; }
a.mark2:hover,a.mark2:active { background-color:#ccc;color: white; }
.date{color:#333;}
a.mark3:link, a.mark3:visited {text-decoration:none;border-radius: 5px;min-width: 50px;padding: 5px 10px;text-align:center;background-color:#f37423;color:
white;}
a.mark4:link, a.mark4:visited {text-decoration:none;border-radius: 5px;min-width: 50px;padding: 5px 5px;text-align:center;background-color:#3b3b3b;color:
white;border: 1px solid #333}
a.mark4:hover,a.mark4:active {background-color:white;color: #333;}
a.mark5:link, a.mark5:visited {text-decoration:none;border-radius: 5px;min-width: 50px;padding: 5px 10px;text-align:center;background-color:#4267b2;color:
white;}
.first_p:first-letter{display: inline-block;float: left;margin-right: 10px;padding: 9px 0;font-size: 40px;border-bottom: 5px solid #ff3838;letter-spacing: 0;}
h2{margin:40px 0}
a.ref1:link {text-decoration:none;border-bottom:1px solid #ffcb82}
a.ref1:hover {text-decoration:none;border-bottom:1px solid #ff3838}
a.ref2:link {text-decoration:none;color:gray;border-bottom:1px solid #ffcb82}
a.ref2:hover {text-decoration:none;border-bottom:1px solid #ff3838}
a.start:link {text-decoration:none;border-bottom:1px solid #ffcb82}
a.start:hover {text-decoration:none;border-bottom:1px solid #ff3838}