JSFiddle - React, Tailwind, and code Playground

HTML

<div>
     <ul>
         <li class="paper">
             <div class="papercontent">
                 <img class="pimg" src="http://127.0.0.1:8080/wordpress/wp-content/uploads/2014/12/oneplus-one-top10.png" alt="oneplus-one-top10" width="452" height="300"  />
                 <p class="pheader"><span class="pnumber">#1</span> OnePlus One</p>
                 <p class="ptext"> Apple unveiled its new version of Mac OS X – Yosemite at this year’s WWDC 2014. And from using the beta, we think it’s beautiful. The new interface in Yosemite is simply superb. Even all the app icons get a new design. The new typography is arguably cleaner.</p>
             </div>
         </li>
     </ul>
</div>

CSS

.paper {
  background-color: rgb(255, 255, 255);
  box-shadow: 1.5px 2.598px 8.6px 1.4px rgba(0, 0, 0, 0.09);
  font-size: 1.8em;
  padding: 30px;
  font-weight: 300;
  font-family: 'Helvetica Neue',sans-serif;
  }

.pnumber
{
  color:white;
}
.pheader
{
  font-size:35px;
}
.papercontent
{
  background-color: rgb(253, 19, 126);
}
.ptext
{
  margin-right: .1em;
  margin-left: .1em;
  font-size: 0.8em;
  padding: 30px;
  font-weight: 300;
  font-family: 'Helvetica Neue',sans-serif;
}   
 li {
  padding: 10px;
  overflow: auto;
}

 li:hover {
  background: #eee;
  cursor: pointer;
}
ul {
  list-style-type: none;
}
.pimg {
max-width: 100%;
  float: left;
height: auto;
}