JSFiddle - React, Tailwind, and code Playground

by timmah

HTML

<div id="content">

     <div id="div1">
      <p id="date" align="right">Friday - 13 Jun 2014</p>
      <p id="blog" align="center">Kaila didn't sit with us at recess today. At lunch she sat with for a short perod of time then Anna invited her to sit wth them and she tagged along. <br />Mylene said I got a 100% on the science test yesterday. Then I came across my other friends and they said the same thing. hhmmm.... I'll just wait until monday.</p>
      <p id="feeling">feeling 'DISAPPOINTED and EAGER'</p>
    </div>
    <div id="div2">
      <p id="date" align="right">Thursday - 12 Jun 2014</p>
      <p id="blog" align="center">Met this new Filipino girl at recess today. Her name is Kaila. She's in 3 of my classes. I wonder what she's like...</p>
      <p id="feeling">feeling 'ANXIOUS'</p>
     </div>

  </div>

CSS

#content {
    border-radius:20px;
    background:white;
    opacity:0.6;
    overflow:auto;
    position:absolute;
   /* top:30%;
    left:20%;
    right:5%;
    height:70%;*/
    width:75%;
    border:solid 1px green;
}

  #date {
    font-family: 'Didact Gothic', sans-serif;
    font-size:10px;
    color:#7A7A7A;}

  #blog {
    font-family: 'Handlee', cursive;
    font-size:18px;
    color:black;}

  #feeling {
    font-family: 'Neucha', cursive;
    font-size:16px;
    color:#4D4D4D;
}
    #div1, #div2 {
        padding:0 2.3%; /* note this is less than 2.5% to allow for the borders */
    }
  #div1 {
    position:relative;
    width:45%;
   /* left:3%;
    right:4%;*/
    float:left;
    border:solid 1px red;
}
  #div2 {
    position:relative;
    width:45%;
    /*right:3%;*/
    float:left;
    border:solid 1px blue;
}