JSFiddle - React, Tailwind, and code Playground

by judy931490judy

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>0913 Homework</title>
  </head>

  <body>
    <div class="one"><a href="https://www.storm.mg/">
        <img src="https://www.storm.mg/images/logo.svg" alt="風傳媒" style="width:70%;height:70%">
      </a></div>
    <hr>
    <p class="two">
      <a class="one" href="https://www.storm.mg/category/2"><b> 評論</b></a>
      <a class="one" href="https://www.storm.mg/category/118"><b> 政治</b></a>
      <a class="one" href="https://www.storm.mg/category/22172"><b> 國內</b></a>
      <a class="one" href="https://www.storm.mg/category/84985"><b> 歷史</b></a>
      <a class="one" href="https://www.storm.mg/category/88881"><b> 專欄</b></a>
    </p>

    <h1 style="font-size:30px;color:black;font-family:微軟正黑體;">夏珍專欄：蔡英文與胡適</h1>

    <p>
      <a class="two" href="https://www.storm.mg/authors/1126/%E5%A4%8F%E7%8F%8D"><b>夏珍</b></a>
      <a class="three" href="https://www.storm.mg/member/login?redirect_uri=https://www.storm.mg/article/1677251" target="_self"><b>+追蹤</b></a>
      <a style="color:dimgray;font-size:16px;font-family:微軟正黑體;text-decoration:none;"><b>2019-09-06 06:20</b></a>
      <a style="color:#AAAAAA;font-size:16px;font-family:微軟正黑體;text-decoration:none;"><b>49624 人氣</b></a>
    </p>

    <p>
      <a class="four" href="https://www.storm.mg/donate/article/1677251/checkout" target="_blank"><b>贊助本文</b></a>
      <a class="five" href="https://youtu.be/OeomzeIlgMQ" target="_blank"><b>简</b></a>
      <a class="six" href="https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&sdk=joey&u=https%3A%2F%2Fwww.storm.mg%2Farticle%2F1677251&display=popup&ref=plugin&src=share_button" target="_blank"><b>分享1.1萬</b></a>
      <a class="seven" href="https://lineit.line.me/share/ui?url=https://www.storm.mg/article/1677251" target="_blank"><b>LINE</b></a>
      <a class="eight" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.storm.mg%2Farticle%2F1677251" target="_blank"><b>f</b></a>
      <a class="nine" href="javascript:...

CSS

body {
  padding: 15px;
  background-color: #f5f5f5;
  min-width: 300px;
}

div.one {
  max-width: 500px;
  border: 1px solid transparent;
  padding: 1% 30% 1% 30%;
  text-align: center;
}

p.two {
  border-style: solid;
  border-width: 0px 0px 0px 9.1px;
  border-color: #FF3333;
  padding: 3px 8px;
  box-sizing: border-box;
  max-height: 32px;
  word-spacing: 5px;
}

a.one {
  font-size: 20px;
  color: black;
  font-family: Microsoft JhengHei;
}

a.one:link {
  color: black;
  background-color: transparent;
  text-decoration: none;
}

a.one:visited {
  color: black;
  background-color: transparent;
  text-decoration: none;
}

a.one:hover {
  color: black;
  background-color: transparent;
  text-decoration: underline;
}

a.one:active {
  color: black;
  background-color: transparent;
  text-decoration: underline;
}

a.two {
  font-size: 20px;
  color: red;
  font-family: Microsoft JhengHei;
}

a.two:link {
  color: red;
  background-color: transparent;
  text-decoration: none;
}

a.two:visited {
  color: red;
  background-color: transparent;
  text-decoration: none;
}

a.two:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a.two:active {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a.three {
  background-color: transparent;
  font-size: 20px;
  color: black;
  font-family: Microsoft JhengHei;
  padding: 4px 10px;
  border: 1px solid;
  border-radius: 4px;
}

a.three:link {
  background-color: transparent;
  color: black;
  font-size: 20px;
  font-family: Microsoft JhengHei;
  padding: 4px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border: 1px solid black;
  border-radius: 4px;
}

a.three:visited {
  background-color: lightgray;
  color: black;
  font-size: 20px;
  font-family: Microsoft JhengHei;
  padding: 4px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border: 1px solid transparent;
  border-radius:...