JSFiddle - React, Tailwind, and code Playground

by jared0921

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>食譜》人見人愛的麻婆豆腐，做法原來超簡單！3步驟、10分鐘完工，吃了都流淚</title>
</head>
<body>

  <header>
    <img src="https://www.storm.mg/images/logo.svg" alt="https://www.storm.mg/">
  </header>
  
  <hr style="color:black;">
  
  <nav>
    <ul>
      <li><img src="https://www.storm.mg/images/logo_new7.svg" alt=""></li>
      <li><img src="https://www.storm.mg/images/1percentstyle.svg" alt=""></li>
      <li><img src="https://www.storm.mg/images/vip_logo.png" alt=""></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>
    </ul>
  </nav>
  
  <hr style="color:grey;">
  
  <div id="wraper">
  
  <main>
    <h1>食譜》人見人愛的麻婆豆腐，做法原來超簡單！3步驟、10分鐘完工，吃了都流淚</h1>
    <img id="mainimg" src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2016/10/26/20161026-102044_U7195_M210879_8c2e.jpg?itok=dcvqO-LQ">
    <div id="article">
    <p><span>在</span>上大學離家生活前，我是個完全不會進廚房幫忙的不肖女，曾跟媽媽說過幾次<br>要跟她學做菜，但總是虎頭蛇尾瞄兩眼就決定去看電視，對於煮飯可說毫無概念<br>，興致也不高，根本不知道吃進嘴的每一道菜是如何組合出來的。</p>
    <a href="https://www.storm.mg/line/notify/login">[啟動LINE推播]每日重大新聞通知</a>
    <p>還記得高中某個暑假遇到了國小同學，發現他唸廚藝學校，我大感佩服，覺得年<br>紀輕輕就會做菜根本是天才，還問他會不會做麻婆      豆腐，可見對那時的我而言那<br>是一道看起來很複雜、需要高深功力的料理。</p>
    <p>後來自己慢慢開始跟著食譜做一些菜，發現麻婆豆腐原來那麼簡單，我當年竟然<br>拿這道菜考我同學真是太沒見識了啊！<b>麻婆豆     腐說起來就三個動作：爆香，把絞<br>肉炒熟，加水到鍋中把豆腐煮熟</b>。雖然貴為餐廳常見菜色，但對料理新手而言，<br>在家中       做出來也非常合理，香辣下飯人人愛，而且它有能當主菜的格局，又有屈<br>居配菜的雅量，是餐桌上的好咖啊！</p>
    </div>
  </main>
  
  <aside>
    <h3 style="color:#ff3838;">熱門文章</h3>
    <hr>
    <div><p>上升星座、下降星座代表什麼意思？輸入出生日期，一秒查詢星座命盤，分析你的人格隱藏面</p></div>
    <hr>
    <div><p>ChatGPT怎麼用、GPT-4是什麼？一篇看懂中文操作註冊步驟、背後原理！</p></div>
    <hr>
    <div><p>真正的美味藏在路邊攤！高雄在地人認證27家必吃美食推薦，只吃丹丹漢堡太可惜啦</p></div>
    <hr>
    <div><p>Netflix影評解析》你真的看懂《讓子彈飛》了嗎？電影台詞中的這些「神隱喻」讓它成為一代神作</p></div>
    <hr>
    <div><p>2023高雄新景點推薦》只知道旗津、駁二真的太落伍！40個一日遊好去處，私房美食、好玩行程一次看</p></div>
  </aside>
  
 ...

CSS

body {
  background-color: #f5f5f5;
  margin: 0;
  
}

header {
  display: flex;
  justify-content: center;
}

header img {
  width: 169px;
  height: auto;
  cursor: pointer;
}

ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

ul li {
  padding: 0;
  margin: 0 10px;
  cursor: pointer;
}

ul li img {
  margin: 0;
  width: 79px;
  height: 25px;
}

#wraper {
  display: flex;
}

main {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  padding: 5px;
}

#mainimg {
  padding: 5px;
  margin: 0;
  width: 100%;
  height: auto;
}

#article {
  background-color: #fff;
}

main a {
  text-decoration: none;
  border-bottom: 1px solid #ffcb82;
  color: #a6a6a6;
}

p {
  padding: 5px;
  font-size: 18px;
}

aside {
  width: 30%;
}