JSFiddle - React, Tailwind, and code Playground

by johnny890118

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <title>johnny的網頁</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body><b>
      <a href="https://www.storm.mg/">
        <img class="imgtitle" src="https://www.storm.mg/images/logo.svg" />
      </a>
      <br />
      <ul>
        <li class="menuli">
          <a href="https://new7.storm.mg/">
            <img src="https://www.storm.mg/images/logo_new7.svg" />
          </a>
        </li>
        <li class="menuli">
          <a href="https://onepercent.storm.mg/">
            <img src="https://www.storm.mg/images/1percentstyle.svg" />
          </a>
        </li>
        <li class="menuli">
          <a href="https://www.storm.mg/premium">
            <img src="https://www.storm.mg/images/vip_logo.png">
          </a>
        </li>
        <li class="menuli"><a href="#news">新聞</a></li>
        <li class="menuli"><a href="#news">評論</a></li>
        <li class="menuli"><a href="#news">財經</a></li>
        <li class="menuli"><a href="#news">生活</a></li>
        <li class="menuli"><a href="#news">下班經濟</a></li>
        <li class="menuli"><a href="#news">贏向新世界</a></li>
      </ul>
      <br />
      <span>▌</span>
      <a href="https://www.storm.mg/category/104">風生活</a>
      <a href="https://www.storm.mg/category/36291">學長姐說</a>
      <a href="https://www.storm.mg/life-category/s24260">職場</a>
      <a href="https://www.storm.mg/life-category/s24264">科技</a>
      <a href="https://www.storm.mg/life-category/s47030">汽車</a>
      <a href="https://www.storm.mg/life-category/s126963">求職必讀</a>
      <h1>電動車能取代油車嗎？從鋰電池原材料，到系統整合的七層動力電池系統可以得知！</h1>
      <p1>2023-02-22 14:21</p1>
      <br />
      <img class="tesla" src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2023/02/20/20230220-122437_U19741_M831069_5bf8.jpg?itok=oNaX3iyv" />
      <div class="ps">
        電動車從鋰電池原材料到系統整合，大致可分為七層動力電池系統。（圖／取自Pexels）
      </div>
      <div class="paper">
       ...

CSS

.imgtitle {
  width: 169px;
  height: 53px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

ul{
  border-style: solid none solid none;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.menuli{
  float: left;
}

.menuli a{
  display: block;
  padding: 8px;
}

.menuli img{
  width: 79px;
  height: 25px;
}

body {
  padding: 17px;
  background-color: #F0F0F0;
}

.tesla{
  width: 70%;
  margin: auto;
}

img {
  width: 100%;
  margin: auto;
}

span {
  color: #00AEAE;
}

a {
  color: black;
  text-decoration: none;
}

h2 {
  color: red;
}

.ps {
  color: gray;
  font-size: 50%;
}

.six {
  background-color: #E0E0E0;
  padding: 20px;
}

a.aa {
  color: red;
  text-decoration: underline;
}

.ps1{
  background-color: #E0E0E0;
  padding: 20px;
}

.paper{
  background-color: white;
  padding: 25px;
  width: 70%;
  float: left;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.hotbar{
  padding: 25px;
  margin-left: 70%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.hotbar h4{
  color: red;
}

.hotbar p{
  color: red;
}

.hotbar a:hover{
  text-decoration: underline;
}

.hotwriter{
  color: red;
}

.hotwriter:hover{
  text-decoration: underline;
}