JSFiddle - React, Tailwind, and code Playground

by mooju7463

HTML

<html>
<body>

<nav class="box">
  <ul>
  <ui style="margin-left:130px" >facebook</ui>
  <ui>Line</ui>
  <ui>Youtube</ui>
  <ui style="margin-left:250px; font-size:30px;">忠於真實・看見未來 Stay True・Look Beyond</ui>
  <ui style="margin-left:330px;">搜尋</ui>
  <ui>購物</ui>
  <ui>登入</ui>
 </ul>
</nav>


<img src="https://www.storm.mg/images/logo.svg" alt="storm media" width="300" height="150" style="margin-left:800px">

<div class="row">
  <ul>
  <ui >新聞</ui>
  <ui >評論</ui>
  <ui >生活</ui>
  <ui >專題</ui>
  <ui>新新聞</ui>
    
  </ul>
</div>

<div class="row2">
<ul>
  <ui style="font-size:60px;color:red;">小資投資</ui>
  <ui style="font-size:40px;text-decoration: none">  <a href="https://www.storm.mg/lifestyle/1090510"; >威士忌居然比股票，房地產還好賺!?</a>
  </ui>
  </ul>
  </div>


<P>
<a href="https://www.storm.mg/category/117;">國際</a>
<a href="https://www.storm.mg/video; ">影音</a>
<a href="https://www.storm.mg/category/26828;">科學新知</a>
</P>



<h1>海平面升高7公尺，全球沿海地區都將被淹沒！最新研究：格陵蘭融冰速度10年激增4倍，人類家園岌岌可危</h1>


<!-- aside START -->
    <aside>
    <h3 style="font-size:36px;color:red;border-top:3px solid black;padding-top:20px;"> 現正熱映中</h3>
   <iframe src="https://www.youtube.com/embed/ZVWXC_j7Dqs" allowfullscreen frameborder="0" height="480" width="520">
   </iframe>
   <h3>熱門新聞</h3>
   <ui class="side"><a href="https://www.storm.mg/article/1104598">台大、政大學生發起拒看中天新聞　師大學生會不</a></ui>
   </aside>
<!-- aside end -->


<P style="font-size:15px">
<a href="https://www.storm.mg/authors/152702/%E9%99%B3%E8%8B%91%E5%A9%B7"> 陳婉婷</a>2019-01-24 10:10 910 人氣</P>



<img src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2019/01/22/20190122-124840_U14782_M493893_9a6a.jpeg?itok=1psEwBsc" width="1000px" height="600px">

<P id="p1">人類面臨嚴峻的氣候問題，再不挽救恐將禍及自己生長的家園。美國俄亥俄州立大學21日發表的最新研究指出，北極圈內的格陵蘭島融冰速度超乎科學家想像，2013年的冰層融化速度比2003年時增加4倍，導致海平面更快上升，格陵蘭島在2002年至2016年間，每年損失2800億噸的冰。格陵蘭島的巨大冰蓋若全面消融，將造成全球災難──海平面將升高7公尺，邁阿密、上海、孟加拉國和太平洋島嶼等地，以及台灣西部沿海地區將沒入海面下。
</P>


<h2>...

CSS

<style>

nav{
    font-family:verdana;
    width:2000px;
    height:80px;
    background-color:lightgray;
    position:absolut;top 0px;
}


.side{   
   width:400px;
   text-decoration:none;
      }

.box{
width: 2000px;
line-height:  75px;
max-width:  100%;
background-color: #dcdcdc;
font-weight:bold;
position:relative;
 }
 
 
#p1:first-letter{
  font-size:70px;
  line-height: ;
  color:red;
  font-weight:bold;
  text-decoration:underline;
}


.row{
  text-align:center;
  border-top:2px solid black;
  border-bottom:2px solid lightgray;
  word-spacing:40px;
  font-size:30px;
  font-weight:bold;
  float:top;
}

.row2{
  margin-left:125px;
  padding: 5px 0px 5px 0px;
  font-weight:bold;
  word-spacing:50px;
}


h1 {
  max-width:1500px; 
  font-size: 55px; 
  padding: 5px 0px 5px 20px;
  position:absolut;
  left:150px; 
  margin-left:150px;
  
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

aside{
  float:right;
}

h2 {
  font-size: 40px; 
  padding: 5px 0px 5px 20px;
  color:red; 
  margin-left:150px;
  position:absolut;left:150px; 
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


h3{
  font-size:36px;
  color:red;
  border-top:3px solid black;
  border-bottom:2px solid gray;
  padding-top:20px;
  padding-bottom:10px;
  letter-spacing:35px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  }

p {
  font-size: 35px ; 
  padding: 5px 0px 5px 20px;
  margin-left:150px;
  margin-right:200px;
  letter-spacing: 3px;
  width:1200px; 
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

img {
  padding: 5px 0px 5px 15px;
  margin-left:150px;
  margin-right:200px;
  
}

}


</style>