JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<div id='news-container'>
    <div id='news-blurb'>
        <div id='news-title' href='http://feeds.reuters.com/~r/reuters/businessNews/~3/LwBEQr4lAVY/story01.htm'>
        Barclays gives information to U.S. precious metals probe
        </div>
        <div id='news-paragraph'>
            LONDON (Reuters) - Barclays has been providing information to an investigation into precious metals by the U.S. Department of Justice (DoJ), the bank said in its 2014 annual report on Tuesday, a week after a similar statement by HSBC.
        </div>
    </div>
    <div id='news-blurb'>
        <div id='news-title' href='http://feeds.reuters.com/~r/reuters/businessNews/~3/LwBEQr4lAVY/story01.htm'>
        Barclays gives information to U.S. precious metals probe
        </div>
        <div id='news-paragraph'>
            LONDON (Reuters) - Barclays has been providing information to an investigation into precious metals by the U.S. Department of Justice (DoJ), the bank said in its 2014 annual report on Tuesday, a week after a similar statement by HSBC.
        </div>
    </div>
    <div id='news-blurb'>
        <div id='news-title' href='http://feeds.reuters.com/~r/reuters/businessNews/~3/LwBEQr4lAVY/story01.htm'>
        Barclays gives information to U.S. precious metals probe
        </div>
        <div id='news-paragraph'>
            LONDON (Reuters) - Barclays has been providing information to an investigation into precious metals by the U.S. Department of Justice (DoJ), the bank said in its 2014 annual report on Tuesday, a week after a similar statement by HSBC.
        </div>
    </div>
    <div id='news-blurb'>
        <div id='news-title' href='http://feeds.reuters.com/~r/reuters/businessNews/~3/LwBEQr4lAVY/story01.htm'>
        Barclays gives information to U.S. precious metals probe
        </div>
        <div id='news-paragraph'>
            LONDON (Reuters) - Barclays has been providing information to an investigation into precious metals by the U.S. Department of...

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300|Roboto:400,300,100, 500|Dancing+Script:400,700);
  @import url(http://fonts.googleapis.com/css?family=Roboto+Slab:300,100,400);
  body {
      background-image: url('http://www.lavancier.com/whitenoise.png');
  }
  #news-container {
      width: 505px;
      position: absolute;
      left: -500px;
      background-color: rgba(20, 20, 20, 0.15);
      height: 100vh;
      transition: all 1s ease;
      top: -5px;
      cursor: pointer;
      overflow: scroll;
  }
  #news-container:hover {
      left: 0px;
  }
  #news-blurb {
      width: auto;
      padding: 20px;
      margin: 20px;
      border-radius: 5px;
      background-color: rgba(255, 255, 255, 0.8);
      text-align: center;
      font-family:'Roboto', Helvetica Neue, Sans-Serif;
      font-weight: 200;
      color: black;
  }
  #news-title {
      font-family:'Roboto Slab', Georgia, Serif;
      font-size: 16pt;
      font-weight: 300;
      color: black;
      margin-bottom: 10px;
      transition: all 0.5s ease;
  }
  #news-title:hover {
      color: orange;
      cursor: pointer;
  }
  #news-paragraph {
      font-size: 10pt;
      font-weight: 300;
      color: black;
      text-align: left;
  }
  #pub-date {
      font-size: 8pt;
      text-align: left;
  }