JSFiddle - React, Tailwind, and code Playground
by gustavofring
HTML
<html>
<body>
<div id="header">
<div id="logo">
<img class ="logo" src ="https://www.storm.mg/images/logo_CT.svg" alt="">
</div>
</div>
<hr />
<div class="main">
<ul id="main">
<li>
<a href="https://new7.storm.mg/">
<img scr="https://www.storm.mg/images/logo_new7.svg">
</a>
</li>
<li >
<a href="https://onepercent.storm.mg/">
<img src="https://www.storm.mg/images/1percentstyle.svg">
</a>
</li>
<li>
<a href="https://www.storm.mg/premium">
<img src="https://www.storm.mg/images/vip_logo.png">
</a>
</li>
<li>
<a href="3">
新聞
</a>
</li>
<li>
<a href="3">
評論
</a>
</li>
<li>
<a href="3">
財經
</a>
</li>
<li>
<a href="3">
生活
</a>
</li>
<li>
<a href="3">
下班經濟學
</a>
</li>
</ul>
</div>
<hr />
<div class="tags-link">
<a>
國際
</a>
</div>
<h1>普查太難：印度料成「全球人口最多國家」，<br>問題是沒人知道什麼時候</h1>
<img class="logo2" src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2021/03/09/20210309-043640_U7111_M676771_417d.jpeg?itokwt9U2iP6">
<div id="article">
<P>人口逾14億的印度預計兩個月後成為全世界人口最多的國家，但至少一年，甚至是未來更長的時間內，印度將 無法明確知道國內實際人口，因為他們無法統計。<br/>印度原訂於2021年進行10年1次的人口普查，因 COVID-19（2019冠狀病毒疾病）疫情延後進行，如今又因技術與後勤障礙而陷入困境，而且目前沒有這項龐大的人口普查會在短期內展開的跡象。
</P>
<P>人口普查項目包括就業、住房、識字率、移民型態、嬰兒死亡率等，專家表示，這些數據延後更新，影響印度 這個亞洲大型經濟體在社會、經濟面上的規劃和政策制訂。另外兩名分別來自印度內政部及內政部戶政署 （Registrar General of India）的官員表示，延誤主要是因為政府決定微調人口普查程序，並在科技的協助下確保過程能萬無一失。
</P>
<P>內政部官員表示，透過手機應用程式（App）來蒐集人口普查數據的軟體，必須與名為「阿達爾」（Aadhaar）的國民身分證等現有身份資料庫同步，這需要時間。負責人口普查的印度內政部戶政署，沒有依請求做出 回應。
</P>
<P>負責人口普查的印度內政部戶政署，沒有依請求做出回應。印度主要反對黨「國大黨」（Congress Party）與批評總理莫迪（Narendra...CSS
body{
background-color: #F0F0F0;
color: darkred;
font-family: "Times New Roman", serif;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
word-break: break-word;
}
#main {
margin-bottom: 15px;
align-items: center;
}
.main ul {
display: flex;
list-style-type: none;
align-items: center;
}
.tags-link{
border-left: 10px solid #ff3838;
padding: 5px 0 5px 10px;
margin-bottom: 10px;
align-items: center;
}
li a {
display: block;
align-items: center;
text-decoration: none;
margin: 5px 10px;
color: black;
}
li img {
width: 60px;
height: 25px;
margin: -8px 0 -5px;
align-items: center;
}
h1{
text-align: center;
color: black;
}
#article{
background-color: #fff;
padding: 10px 30px 50px;
width: 550px;
}
#logo{
text-align: center;
}
.logo2 {
margin: 20px;
}
.logo {
border: 2px;
margin: 20px;
width: 169px;
height: 50px;
}
p {
width: 500px;
border: 5px;
}
.link {
color: gold;
}
.link:visited {
color: green;
}
.link:hover {
color: red;
}
.link:active {
color: blue;
}
.card_inner_wrapper{
display: block;
overflow: hidden;
line-height: 1.3;
font-size: 16px;
margin: 0;
padding: 0;
border: 0;
width: 100%;
vertical-align: baseline;
}
.side_bar_titl{
margin-bottom: 0;
padding: 10px 0;
border-bottom: 1px solid #ccc;
}
ol{
width: 250px;
border: 5px;
}
.card{
font-size: 10px;
color: red;
width: 120px;
height: 1960px;
position: absolute;
transform: translate(475%, -35%);
}