JSFiddle - React, Tailwind, and code Playground

by liang10000

HTML

<!DOCTYPE html>
<html>

  <head></head>

  <bodY>
    <div style="width:100%;height:100%;">
      <a class="logo" href="https://www.storm.mg/" target="_blank"><img src="https://www.storm.mg/images/logo.svg" style="logo"></a>
    </div>
    <hr>
    <div class="list">
      <ul>
        <li><a href=https://new7.storm.mg/ target="_blank"><img src="https://www.storm.mg/images/logo_new7.svg"></a></li>
        <li><a href=https://onepercent.storm.mg target="_blank"><img src="https://www.storm.mg/images/1percentstyle.svg"></a></li>
        <li><a href=https://www.storm.mg/premium target="_blank"><img src="https://www.storm.mg/images/vip_logo.png"></a></li>
        <li>新聞</li>
        <li>評論</li>
        <li>財經</li>
        <li>生活</li>
        <li>下班經濟學</li>
      </ul>
    </div>
    <hr style="color:#cccccc">

    <div class="tag">
      <a style=color:black href="https://www.storm.mg/category/23083">財經</a>
      <a style=color:black href="https://www.storm.mg/category/171729">商業</a>
    </div>
    <h2><b>「韓國人來台灣玩，最夯伴手禮是統一滿漢大餐！」熊津食品總經理：以速食麵、茶飲搶進東北亞</b></h2>
    <p><a style=color:red href=" https://www.storm.mg/authors/49552/%E4%B8%AD%E5%A4%AE%E7%A4%BE" target="_blank">中央社</a> 2023-08-05 11:09 3323 人氣</p>

    <div class="container">
      <div class="flex-column">

        <img src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2023/08/05/20230805-110252_U13100_M877610_37f0.jpg?itok=LHZYxfiN">


        <p class="ex">韓國熊津食品被統一集團購併後，開始發揮整合效益（圖片來源：熊津食品instagram)</p>

        <div class="in">

          <p>統一集團併購韓國熊津食品，開拓東北亞市場，以台灣長銷型的速食麵、茶飲「登韓」，並將熊津具韓國代表性的人蔘飲料藉由集團通路帶進台灣，開啟統一集團「亞洲流通大平台」第一步。</p>

          <p>統一集團於2019年以新台幣70餘億元完成併購韓國飲料、甜食製造公司熊津食品，事業版圖首度延伸到東北亞。外界好奇，當時在多個買家間，熊津為何選擇統一集團。</p><br>

          <p><b>熊津食品總經理李芷浩今天首度接受外媒訪問表示，統一集團旗下擁有強大的通路體系，產品面更涵蓋多面性，是主要關鍵；同時，在產品、市場上都有合作的空間。</b></p>

        </div>


        <img...

CSS

body{
  width: 700px;
}
.container {
  display: -webkit-flex;
  display: flex;
}
.nav {
  width: 200px;
  padding-left: 10px;
}

.flex-column  {
  -webkit-flex: 1;
          flex: 1;
}
.flex-column img{
  width: 500px;
  height: auto;
}
p {
  line-height: 1.5;
}

.logo {
  max-width: 150px;
  max-height: 80px;
  display: block;
  margin: auto;
}

.list {
  max-width: 100%;
  max-height: 30px;
}

.list ul {
  display: flex;
  margin-left: -40px;
}

.list li {
  display: block;
  font-size: 20px;
  padding-right: 10px;
}

.list li a img {
  width: 80px;
  height: 25px;
}
.tag{
  border-left: red 8px solid;
  padding-left: 8px;
  margin: 10px 0;
  }

.ex {
  margin-top: -3px;
  margin-bottom: 25px;
  color: grey;
  font-size: 15px;
}

.look {
  padding: 35px;
  background-color: #ebebe9;
  color: black;
  border-left: solid 5px red;
  margin: 25px 10px;
}
.new{
  margin-left: -10px;
}
.new li{
  padding-top: 10px;
}
.new li a{
  color: black;
}
.new p{
  font-size: 15px;
  color: red;
  margin: 5px 0 5px;
}

.in {
  text-indent: 20px;
}

h3 {
  color: red;
}

/* 沒有底標 */
a {
  text-decoration: none;
}

/* 未點過 */
a:link {
  color: grey;
}

/*  點過 */
a:visited {
  color: blue;
}

/* 滑鼠移過去 */
a:hover {
  text-decoration: underline;
}