JSFiddle - React, Tailwind, and code Playground

by AnnMariePrice

HTML

<!DOCTYPE html>
<html lang = "en">
<head>
 <link rel="stylesheet" href="news.css">
  <title>BBC News - Home</title>
</head>
<body>
 <div id = "table">
 

 <div class = "pagebanner">
  <div class = "icontitle">
    <a href = "https://www.bbc.co.uk/news/" class = "link"><img src= "https://news.bbcimg.co.uk/nol/shared/img/bbc_news_120x60.gif" alt = "BBC News - Home"></a>
    <h1>BBC News - Home</h1>
  </div>
  <p id = "intro">BBC News - Home</p>
 </div>
  <div class = "stories">
   <h2>Stefan Lofven: Sweden's parliament ousts prime minister</h2>
     <ul>
       <li class = "summary">Stefan Lofven loses a vote of confidence weeks after an election which saw a far-right surge.</li>
       <li class = "readmore"> <a href="https://www.bbc.co.uk/news/world-europe-45637386" title="Stefan Lofven: Sweden's parliament ousts prime minister">Read More</a></li>
       <li class = "timedate">Tue, 25 Sep 2018 13:57:50 GMT</li>
     </ul>
  <hr>
    <h2>Instagram founders Systrom and Krieger leaving Facebook-owned firm</h2>
      <ul>
        <li class = "summary">The departure of Kevin Systrom and Mike Krieger is the latest test for parent company Facebook.</li>
        <li class = "readmore"><a href="https://www.bbc.co.uk/news/technology-45635736" title="Instagram founders Systrom and Krieger leaving Facebook-owned firm">Read More</a></li>
        <li class = "timedate">Tue, 25 Sep 2018 12:17:52 GMT</li>
      </ul>
  <hr>
   <h2>Life expectancy progress in UK 'stops for first time'</h2>
      <ul>
        <li class = "summary">Improvements have ground to a halt for the first time since records began, in 1982, ONS data shows.</li>
        <li class = "readmore"><a href="https://www.bbc.co.uk/news/health-45638646" title="Life expectancy progress in UK 'stops for first time'">Read More</a></li>
        <li class = "timedate">Tue, 25 Sep 2018 11:36:13 GMT</li>
      </ul>
      <hr>
   <h2>Michael Kors snaps up Versace for $2.1bn</h2>
     <ul>
       <li class = "summary">US...

CSS

body {
  background-color: #3D4D7A;
  margin: 8px;
}
#table {
  background-color: white;
  margin-left: 2em;
  margin-right: 2em;
}
.pagebanner {
  background-color:#00207A;
  color: #FFFFFF;
  font-family: "helvetica";
  padding: 10px;
  margin: 0px;
  
}
.link {
  float: left;
}


.icontitle {
  

  overflow: auto
 }
 .link {
   padding-right: 10px;
 }



   

#intro {
  font-style: italic;
  font-weight: bold;
}




.stories{
  margin: 0px;
  background-color: #FFFFFF;
  padding: 1em
}
h2 {
  font-family: "helvetica";
  color: #990000;
}
ul {
  list-style: none;
}
a.link {}
.timedate {
  padding-top: 1em;
  font-size: 0.8em;
  font-style: italic
  
}