JSFiddle - React, Tailwind, and code Playground

HTML

<div id="stock_section">
  <div>
    <div>
      <span style="color: white;">日經 37624.22</span>
      <span class="triangle-down"></span>
      <span style="color: green;">0.58%</span>
    </div>

    <div>
      <span style="color: white;">台股 18067.55</span>
      <span class="triangle-up"></span>
      <span style="color: red;">0.22%</span>
    </div>
    <div>
      <span style="color: white;">道瓊 38272.75</span>
      <span class="triangle-down"></span>
      <span style="color: green;">1.35%</span>
    </div>
    <div>
      <span style="color: white;">美元 31.527</span>
      <span class="triangle-down"></span>
      <span style="color: green;">0.032</span>
    </div>
    <div>
      <span style="color: white;">美債10Yr 4.30%</span>
      <span class="triangle-down"></span>
      <span style="color: green;">0.013%</span>
    </div>

    <div>
      <span style="color: white;">WTl原油 77.88</span>
      <span class="triangle-up"></span>
      <span style="color: red;">0.1</span>
    </div>
  </div>
</div>


<header class="content-block">
  <div style="text-align: center;">
    <a href="#">
      <img src="https://www.storm.mg/images/logo.svg" style="width:15%;">
    </a>
    <div id="subscribe_header">
      <a href="https://www.storm.mg/article/5017577">來源</a>
      <a href="#" style="background-color: #FFD306; color: white;">訂閱華爾街日報</a>
      <a href="#" style="background-color: #CE0000; color: white;">支持風傳媒</a>
      <a href="#" style="text-align: center;"><img src="https://i.imgur.com/JIdOwfG.png" style="width:4%; vertical-align: bottom; color: black;">會員專區</a>

    </div>
  </div>
  <div>
    <ul id="header-list">

      <li>
        <a href="https://new7.storm.mg">
          <img src="https://www.storm.mg/images/logo_new7.svg" alt="">
        </a>
      </li>


      <li>
        <a href="https://onepercent.storm.mg">
          <img src="https://www.storm.mg/images/1percentstyle.svg" alt="">
        </a>
      </li>

      <li>
        <a...

CSS

* {
  position: relative;
  box-sizing: border-box;
}

body,
html {
  margin: 0px;
  padding: 0px;
  width: 100%;
  background-color: #F0F0F0;
  font-family: Noto Sans TC, Roboto, Arial, sans-serif;
}



header {
  display: block;
  line-height: 1.3;
  margin: auto;
}

header>div {
  padding: 10px 0 0 0;
  position: relative;
  max-width: 100%;
}

figcaption {
  font-size: 14px;
  line-height: 1.3;
  margin-top: 10px;
  color: #999;
}

.content-block {
  width: 1100px;
  margin: auto;
}

#subscribe_header {
  position: absolute;
  padding: 10px;
  height: 10px;
  top: 0;
  right: 0;
  text-align: right;
}

#subscribe_header>a {
  padding: 5px 8px;
  border-radius: 10%;
  text-decoration: none;
}

#stock_section {
  background-color: black;
  height: 35px;
  border-bottom: solid 1px;
  display: flex;
  justify-content: center;
}

#stock_section>div {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1400px;
  padding: 8px 0px;
  font-size: 14px;
}


#stock_section>div>div {
  text-align: center;
  padding: 0px 5px;
  max-width: 200px;
}

#stock_section>div>div>span {
  padding: 0px 1px;
}


.triangle-down {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 11px solid green;
  display: inline-block;
  text-align: center;
}

.triangle-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 11px solid red;
  display: inline-block;
}

#header-list {
  list-style-type: none;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  padding: 5px 0 0 3px;
  text-align: center;
  display: block;
}

#header-list li {
  vertical-align: middle;
  display: inline-block;
  margin: 0 4px;
}

#header-list li a {
  text-decoration: none;
}

#header-list li a img {
  height: 22px;
}

#news-tag {
  display: block;
  border-left: 10px solid #ff3838;
  padding: 5px 0 5px 10px;
  margin-bottom: 10px;
}

#news-tag...