JSFiddle - React, Tailwind, and code Playground

by tony05060165

HTML

<!DOCTYPE html>
<html>
      <head>
           <meta charset="utf-8"/>
           <title>文章練習</title>
      </head>
      <body>
           <div class="logo"><img class="logo" src="https://www.storm.mg/images/logo.svg"/></div>
           <hr/>
           <div class="list">
               <a href="https://new7.storm.mg/"/><img class="list-picture" src="https://www.storm.mg/images/logo_new7.svg"/></a>
               <a href="https://onepercent.storm.mg/"/><img class="list-picture" src="https://www.storm.mg/images/1percentstyle.svg"/></a>
               <a href="https://www.storm.mg/premium"/><img class="list-picture" src="https://www.storm.mg/images/vip_logo.png"/></a>
               <a href="https://www.storm.mg/#"/><div class="list-word">新聞</div></a>
               <a href="https://www.storm.mg/#"/><div class="list-word">評論</div></a>
               <a href="https://www.storm.mg/#"/><div class="list-word">財經</div></a>
               <a href="https://www.storm.mg/#"/><div class="list-word">生活</div></a>
               <a href="https://www.storm.mg/#"/><div class="list-word">下班經濟學</div></a>
           </div>
           <hr/>
           
           <h1 class="title">吳典蓉專欄：賴清德敢找黃國昌當法務部長？</h1>
           <hr/>
           <div class="picture"><img src="https://image.cache.storm.mg/styles/smg-800x533-fp-wm/s3/media/image/2023/06/14/20230614-122047_U2008_M862108_0bd2.jpg?itok=QNTEGmEw"/></div>
              <div class="verse">
              <div class="verse2">
           <p>在2024這場現代版三國演義的總統大選中，柯文哲是三組總統參選人中籌碼最少但也因此最敢玩的參選人，他在6日晚間接受館長訪問時丟出找黃國昌擔任法務部長的構想，柯文哲此舉被譏為是沒本錢生意，但是卻得到年輕選民（至少在網路社群）的熱烈回應；事實上黃國昌之前就毛遂自薦願擔任法務部長，但為何只有柯文哲敢接球？問題關鍵就是民進黨的執政密碼。</p>
           <p>在國民黨總統參選人侯友宜民調穩居第一或第二時，所謂的「藍白合」幾乎成了這次大選的主軸，等到柯文哲數次民調站上第二，「藍白合」之說嘎然而止，藍營再也絕口不提，驗證國民黨操作這個議題的投機性格；然而，「藍白合」之 說之所以難成，主要是因為有另一個「綠白合」伏流，導致柯文哲的支持度難以完全和藍營畫上等號，換句話說，柯文哲即使是「非綠」，也不一定等同於藍，事實上有許多「非綠」成員的前身也許就是綠營、或是不排斥綠營，這部分就牽涉到柯文哲和賴清德選票競和問題。<p/>
           <h2 class="title">大安區自己有人還徵召博雅　民進黨「加值」已流失的進步價值？</h2>
          ...

CSS

body{
  background-color:#F0F0F0;
}
.title{
  color:red;
  padding:20px;
}
.logo{
  max-width:130px;
  margin:0 auto
}
.list{
  display:flex;
  justify-content:center;
  align-items:center;
}
.list-picture{
  flex:none;
  width:none;
  width:50px;
  height:15px;
  margin:8px
}
.list-word{
  padding-bottom:5px;
  font-size:13px;
  font-weight:bold;
  margin:6px;
  color:black
}
.picture{
  padding:20px;
  width:450px;
}
.verse{
  display:flex
}
p{
  padding:20px;
}
.verse2{
  flex:none;
  width:70%
}
.verse3{
  flex:left;
  width:30;
}
.verse3-title{
  color:red;
  text-align:left;
  font-size:25px;
  font-weight:bold
}
.verse3-word{
  margin-top:15px;
  border-top:1px solid black;
  border-bottom:1px solid black;
  padding:8px;
  color:black;
}
.verse4-word{
  border-bottom:1px solid black;
  padding:8px;
  color:black;
}