JSFiddle - React, Tailwind, and code Playground

by gustavofring

HTML

<html>
  <body>
  <div>
  <p class='andy'>
  <a href='https://events.storm.mg/member/SALON/'><img src='https://www.storm.mg/images/logo.svg'width=20% style="display:block; margin:auto;" ></a>
  </p>
  </div>
<div style="width:100%; height:10px; border-bottom:1px solid black; clear:both;"></div>
<div class='nana'><a href='https://www.storm.mg/lifestyle/4735515'><img src='https://tpc.googlesyndication.com/simgad/3749521696233352668' width=100%></a>
</div>






  <br>
     <p0>▌</p0>
     <a href='https://www.storm.mg/category/104' style='font-weight:700'>風生活</a>
     <a href='https://www.storm.mg/category/23083'style='font-weight:700;padding-left:5px'>財經</a>
     <a href='https://www.storm.mg/category/164654'style='font-weight:700;padding-left:5px'>下班經濟學</a>
     <a href='https://www.storm.mg/category/249724'style='font-weight:700;padding-left:5px'>理財</a>
    
    <h1>
      稅收超徵》普發現金6000元何時能領？4大QA看懂申請資格、領取方式，6類人免登記直接入帳
   
   
   </h1><a href='https://www.storm.mg/authors/248743/%E9%BB%83%E5%AD%90%E7%91%84' style='font-size:15px;color:red;font-weight:500;padding-right:10px'>黃子瑄</a>

 <a href='https://www.storm.mg/member/login?redirect_uri=https://www.storm.mg/lifestyle/4700152' style='font-weight:700;border:1.5px solid lightgray;border-radius:5px;font-size:15px;padding:4px 15px'>+追蹤</a>


<p1>2023-02-23 15:53</p1>
    <p2>273018 人氣</p2>
   <br/><br/>
   
   <div class='coco'>
   <img src='https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2020/05/14/20200514-041755_U18447_M611659_2ccb.jpg?itok=Ovku4HOW' width='100%'>
   <p3>全民普發現金的疫後特別條例於2月21日完成三讀，發放時間、對象、方式一次看懂！（資料照／郭晉瑋攝）</p3>
   <br/>
   <br/>
   <div class='fancy'>
     <p4>全</p4>
   <p5>民普發現金的疫後特別條例於2月21日完成三讀！</p5>
   <p6>依照政府規劃，超徵稅收中的新台幣3800億元，用於普發現金、挹注健保基金、擴大公共運輸補貼等10類項目。其中1400億元將普發6000元現金於民，不過未來何時會發放？後續又該如何登記、領取，以下也整理出普發6000元現金的4大QA！</p6>
   <br/><br/>
      <div class='apple'>
     <a href='https://www.storm.mg/line/notify/login' style="color:gray" >[啟動LINE推播] 每日重大新聞通知</a></div>
    ...

CSS

.nana{
padding-top: 20px;

}
button{
  border-radius:4px;
  border:1px solid lightgray;
  font-size:15px;
  width:70px;
  font-weight:500;
  background:#F5F5F5
}
.coco{
  float:none;
  width:70%;
  display:inline-block;
  vertical-align:top;
}
.look
h5{
  border-bottom:1px solid black;
  padding-bottom:10px;
  font-size:18px;
  color:red;
  margin-top:10px;
  }
  
  h2{
    font-family:華康粗黑體;
float:left;
  color:red;
  width:20%;
  display:inline-block;
  vertical-align:top;
  }
  p10{
  float:right;
  color:black;
  width:115%;
  display:inline-block;
  position:relative;
  left:40px;
  bottom:50px;
  font-size:15px;
  vertical-align:top;
}


.poo{
  float:none;
  width:20%;
  display:inline-block;
  vertical-align:top;
}


}
.fancy{
  background:white;
  float:none;
  width:88%;
  display:inline-block;
  vertical-align:top;
  padding:10px 30px 10px 30px;
}
.google{
  float:right;
  width:25%;
  display:inline-block;
vertical-align:top;
padding-top:0px;
padding-left:20px;
position:absolute;
top:462px;

  
}
h4{
  font-size:18px;
  color:red;
  margin-top:10px;
}

.dada{
  
  float:none;
  width:100%;
  margin-top:-20px;
  display:inline-block;
  vertical-align:top;
  
  
}
.dada
a{
  position:relative;
  top:20px;
}
.qooq
a{
  
  position:relative;
  top:30px;
  right:1px;
  letter-spacing:-1px;
}
.dada
a{

  font-size:16px;
  font-family:華康粗黑體;
  position:relative;
}

.papa
a{

 font-size:16px;
  font-family:華康粗黑體;
  position:relative;
  top:10px;
}
.yaya
a{

   width:100px;
  position:relative;
  top:22px;
  left:33px;
  letter-spacing:-1px;

}

.wawa
a{
  
  font-size:16px;
  font-family:華康粗黑體;
  position:relative;
  top:20px;
}
.wawa{
   position:relative;
  bottom:10px;
}
.qaqa
a{
  position:relative;
  top:30px;
  left:33px;
  letter-spacing:-1px;
}
a,p{
  display:inline;
}
html{
  background:#F5F5F5;
}
body{
  background:#F5F5F5;
  padding:10px;
}
a{
  color:black;
  font-weight:700;
  text-decoration:none;
  font-size:15px;
}
p0{
  color:#49A3BC;
}
h1{
 ...