JSFiddle - React, Tailwind, and code Playground

by jamugirlsweetsforever512

HTML

<div class="header">
  <p>Covid</p>
</div>

<div class="form">
  <div class ="list">
    <p>covid now</p>
  </div>
</div>
<p>Fortunately, global cases and deaths are beginning to decline and decrease. The largest percentage of decrease is reported by the Easter Mediterranean Region, with a decrease of 17%. On the other hand, Alberta hospitals are unable to offer life support to the needy resulting in a dysfunctioning health system. While in Europe, over 5,000 people are protesting against COVID precautions, not wanting to wear masks and get vaccinated. </p>
<div class="form">
  <div class ="list">
    <p>Delta</p>
  </div>
</div>
<p>Delta is a mutation of the Corona Virus. And is even more powerful than it.  It replicates much faster, and is much more infectious. It`s much more infectious than COVID, and is more dangerous. Country wise, Australia has reported 1,900 new cases as of today. Fortunately, some countries are free of Delta. Including Queensland, and Hong Kong. </p>
<div class="form">
  <div class ="list">
    <p>How to keep yourself safe</p>
  </div>
</div>
<p>
-Get vaccinated ASAP</p>
<p>-Wear mask properly (covering nose and mouth)</p>
<p>-Keep social distance (at least 1 meter away)</p>
<p>-Keep your hands clean (with alcohol or washing your hands)</p>
<p>-When sneezing or coughing, cover your nose and mouth with a tissue or your  elbow</p>
<p>-If you develop symptoms, take a covid test</p>
<p>-If tested positive, self isolate until you recover (in extreme cases, go to the hospital)</p>
<p>-Avoid spaces that are closed, or crowded
</p>

CSS

body {
  background-image: #DDD3FF;
}

.header {
  padding: 5px;
  border-radius: 10px;
  background-color: #2471A3;
  color: white;
  text-align: center;
  font-size: 40px;
  font-family: 'Titillium Web';
}

.list {
  color: blue;
  text-align: center;
  font-size: 25px;
  font-family: 'Titillium Web';
}

.item {
  border-radius: 5px;
  margin: 20px;
  padding: 10px;
  width: 300px;
  text-align: center;
  font-family: 'Titillium Web';
  background-color: #d1f5fa;
  display: flex;
}

.form {
  margin-top: 10px;
  padding: 20px;
  border-radius: 10px;
  background-color: #85C1E9;
}

.input {
  border: none;
  border-radius: 3px;
  padding-left: 10px;
  padding-right: 10px;
  height: 30px;
  width: 30%;
}

.button {
  border: none;
  border-radius: 3px;
  padding-left: 10px;
  padding-right: 10px;
  height: 32px;
  font-family: 'Titillium Web';
}

.item-text {
  flex-grow: 1;
}

.close {
  cursor: pointer;
}

button:hover {
  color: #29D1EA;
}