JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./index.css">
  <title>Document</title>
</head>

<body>
  <h1>華爾街日報》網路音樂市場震撼彈!全球最大音樂公司與TikTok談判破裂:泰勒絲、怪奇比莉歌曲都要被下架</h1>
  <div id="intro">
    <a href="https://www.storm.mg/authors/255636/Meghan+Bobrowsky">Meghan Bobrowsky</a>
    <span>;</span>
    <a href="https://www.storm.mg/authors/424367/Anne+Steele">Anne Steele</a>
    <span>2024-03-01 10:00 </span>
  </div>
  <img
    src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2024/03/01/20240301-092220_U1085_M936015_09f6.jpg?B23vIMalYwSW.TEhKB_8SwsyPTxkObd2&itok=lDI1n15a"
    alt="" width="360" height="240" class="imgCover">
  <p class="imgCover">關·史蒂芬妮、泰勒絲、怪奇比莉的抖音帳號。(翻攝網路)</p>
  <hr>
  <div id="content">
    <p>當紅歌手史蒂芬妮是No Doubt樂團的女主唱,她原計劃在本月早些時候發布與丈夫布萊克·謝爾頓(Blake Shelton)的對唱歌曲,並利用超級盃(Super
        Bowl)比賽前的表演環節進行宣傳。然而,在新歌<span id="purpleIrises">「PurpleIrises」</span>發布前一周,史蒂芬妮所屬唱片公司的母公司環球音樂集團(Universal Music
        Group)在與社交媒體平台TikTok的合約談判陷入僵局後,採取了不同尋常的舉措,將旗下所有藝人的歌曲從TikTok下架。此舉意味著史蒂芬妮的歌曲無法在TikTok上發布,也不能在該應用上發布推廣這首歌的短影片。在TikTok上發布和宣傳已成為新歌宣傳的核心環節。史蒂芬妮和她的團隊決定轉變策略,由謝爾頓所屬的鄉村音樂唱片公司Warner
        Music Nashville發行這首歌,而不是環球音樂的Interscope Records。此後,史蒂芬妮和謝爾頓以歌曲「Purple
        Irises」為背景音樂的TikTok影片獲得了數百萬的點擊量。TikTok在全球有10億多用戶,這些用戶渴望將環球音樂曲庫中的歌曲片段剪輯到他們的舞蹈影片、教程和表情包中。而眼下TikTok和這家全球最大的音樂公司僵持不下的一個問題是,TikTok應向環球音樂支付多少費用,才能讓TikTok用戶使用環球音樂的巨大麴庫。
      </p>
      <h2 style="color: brown;">「想像一下它的聲音」</h2>
      <p>
        音樂已成為TikTok的命脈。根據內容識別技術和數據公司Pex的數據,去年TikTok上85%的影片包含音樂,而且這一比例呈上升趨勢。
        TikTok短影片中使用的最長不超過60秒的音檔片段往往有助於影片走紅,於是帶動在Spotify和Apple Music等服務應用程式上的完整版歌曲的串流媒體播放量急劇上升,進而給唱片公司和藝人帶來更多收入。
        今年2月1日,由於環球音樂與TikTok之間有關音樂使用的談判陷入僵局,在環球擁有的音樂版權到期當天,環球旗下藝人的歌曲在TikTok影片中就被靜音了。
        在環球旗下備受矚目的明星中,亞莉安娜·格蘭德(Ariana Grande)最近才發布了她與瑪麗亞凱莉(Mariah Carey)合作的新歌「yes, and?...

CSS

h1{
    text-align: left;
    width: 1000px;
    margin: auto;
    margin-top: 50px;
    background-color: dodgerblue;
    color: black;
  }
  
  #intro{
    text-align: center;
    color:black;
    padding-bottom:10px;
    font-size: 24px;
    margin: 15px;
  }
  
  a:link {
    color: black;
    text-decoration: underline;
  }
  a:visited{
    color: grey;
      background-color: white;
  }
  a:hover{
    color: red;
    text-decoration: underline;
  }
  a:active{
    color: yellowgreen;
  }
  
  .imgCover{
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  #content{
    text-align: justify;
    width: 1200px;
    margin: auto;
    font-size: 18px;
    text-indent: 35px;
  }

#purpleIrises{
    color:purple;
    text-shadow: 1px 1px;
}