JSFiddle - React, Tailwind, and code Playground

by Ken Sprague

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>BBC News - Home</title>
    <meta name="description" content="Welcome to your New Source.">
    <link rel="stylesheet" href="main.css">
  </head>

  <body>
    <h1>BBC News - Home</h1>
    <h2>BBC News - Home</h2>
    <ul class="home_page_news">
      <li class="news">
        <ul>
          <li class="title"> <a href="http://www.bbc.co.uk/news/world-europe-43048921">Russia Saratov crash: Ice on sensors 'may be cause'</a>
            <li class="snippet">That could have led to wrong speed data and contributed to the crash that killed 71, officials say.</li>
            <li class="date_time">Tue, 13 Feb 2018 16:35:55 GMT</li>
        </ul>
        </li>

        <li class="news">
          <ul>
            <li class="title"><a href="http://www.bbc.co.uk/news/world-africa-43046510">South Africa: ANC decides Zuma must go 'urgently'</a>
              <li class="snippet">President Jacob Zuma is refusing to resign so his party has issued a formal demand, officials say.</li>
              <li class="date_time">Tue, 13 Feb 2018 16:37:24 GMT</li>
          </ul>
          </li>

          <li class="news">
            <ul>
              <li class="title"><a href="http://www.bbc.co.uk/news/world-asia-43040619">Winter Olympics: Kim Jong-un calls for further reconciliation</a>
                <li class="snippet">Kim Jong-un advocates "livening up" relations with the South after decades of mistrust.</li>
                <li class="date_time">Tue, 13 Feb 2018 08:14:19 GMT</li>
            </ul>
            </li>

            <li class="news">
              <ul>
                <li class="title"><a href="http://www.bbc.co.uk/news/world-middle-east-43032411">Ahed Tamimi: Palestinian viral slap video teen goes on trial</a>
                  <li class="snippet">For Palestinians, Ahed Tamimi is a national icon, but to Israelis she is a violent trouble-maker.</li>
                  <li class="date_time">Tue, 13...

CSS

body {
  background-color: #3D4D7A;
  font-family: "helvetica", "sans-serif";
  border-width: thin;
  border-style: solid;
  margin-top: 3em;
  margin-right: 5em;
  margin-bottom: 10em;
  margin-left: 3em;
}

h1 {
  padding: 3.25em;
  background-color: #00207A;
  text-align: center;
  font-size: 2em;
  color: white;
  padding-top: .5em;
  margin-bottom: -1em;
  margin-top: 0em;
}

h2 {
  padding: 0em;
  background-color: #00207A;
  text-align: left;
  font-size: 1em;
  font-style: italic;
  color: white;
  padding-left: 1em;
  margin-bottom: 0em;
  margin-top: 0em;
}

ul {
  list-style-type: none;
  text-align: left;
  background: white;
  padding-bottom: 1em;
  margin-bottom: 0em;
}

.title {
  font-size: 1.5em;
  font-weight: bolder;
  padding-bottom: 1em;
  padding-top: 1em;
}

a:link {
  text-decoration: none;
  color: blue;
  background-color: white;
}

a:visited {
  text-decoration: underline;
  color: crimson;
  background-color: white;
}

a:hover {
  text-decoration: none;
  color: white;
  background-color: blue;
}

a:active {
  text-decoration: underline;
  color: crimson;
  background-color: white;
}

.snippet {
  font-size: 1em;
  padding-bottom: 1em;
}

.date_time {
  font-size: .75em;
  font-style: italic;
  color: black;
  padding-bottom: .5em;
}