JSFiddle - React, Tailwind, and code Playground

by KitHuang

HTML

<html>
 <body>
 <div class="bar">
 <ul>新聞 </ul>
 <ul>評論 </ul>
 <ul>其他 </ul>
 </div>
  <div class="container">
  <nav>
  <h4>最新文章</h4>
    <li>1</li>
    <li>2</li>
    <li>3</li>
   </nav>
  <div class="column">
  <section>
    <h1>25K翻轉成600多萬資產！3招學會年賺15%的紅綠燈選股法！【下班經濟學】</h1>

    <p>每個月的薪水就是這麼少，如何才能幫自己創造另一份收入呢？艾蜜莉曾是名月領25K的上班族，靠著她獨創的「紅綠燈選股法」，從30萬元滾出600多萬資產，年報酬率更超過15%！這次她不僅要分享她的投資心法，更要破解你的理財迷思！</p>

    <h2>
      買股票只會存股？善用價差讓你賺更快！
    </h2>
    <p>
      存股已然成為投資股票的主流趨勢，許多人都抱著把錢放銀行只會越存越薄的心態，慢慢投入股票市場存股，但想更快賺到錢該怎麼辦？艾蜜莉認為，除了找到好公司存股之外，善用景氣循環股也不失為一種累積財富的方法！以她自己的操作經驗，平均一年多就可有20%的報酬率，而且這方法適合所有人使用！
    </p>

    <h2>
      進場&出場時機該怎麼算？
    </h2>

    <p>
      面對起伏不定的股海，到底何時才是對的進場時間，是所有投資人關心的問題！由艾蜜莉獨創的「紅綠燈選股法」，利用5種以上的判斷方法，將股價分為便宜價、合理價、昂貴價，教你在便宜價進場，昂貴價出場。在節目中艾蜜莉也親自示範如何利用平均股價法，找到個股的便宜價及合理價，一旦體質優良的股票跌入便宜價，就是對的進場時機！
    </p>
</section>
</div>
</div>
</body>

CSS

.bar{position: relative;
  padding:20px;
  background-color:gray;}
  
ul{display:inline;}

.container {
  position: relative;}

nav {
  position:absolute;
  right: 0px;
  width: 200px;
  background-color:gray;
}

section {
   position:absolute;
   margin-right:200px;
  }
  
body {
  margin-bottom: 120px;
}
h1{padding:10px;}

p{padding:10px;}

h2{padding:5px;}

h4{padding:5px;}

li{padding:5px;}