JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
<div class="mainContent">
  <h1>Welcome!</h1>
  <p>Hi! I'm Francesca, master-knitter, creator and owner over here at <strong>Ruby Tuesday Creative.</strong></p>
  <p>I'm a 21 year old Multimedia student and client-side developer living in Canterbury. I've been interested in creating everything from websites to dresses to knitting beautiful (and sometimes slightly odd) accessories for years.</p>
  <h2>I knit. I make websites. No, I can't knit you a website</h2>
  <p>I started Ruby Tuesdays after I ran out of people to give my knitted creations too. I love knitting new and exciting things and I'm really happy when someone finds something they like in my designs.</p>
  <p>In the future I hope to be attending some craft fairs and knitting ideas, you can keep up to date with events and activities by following Ruby Tuesday on <a href="http://www.facebook.com/rubytuesdaycreative" traget="_blank">Facebook</a>.</p>
</div>
<div class="aside">
  <img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/522430_296324767142896_568591911_n.jpg" />
  </div>
    </div>

CSS

.mainContent{float:left;display:inline;width:55%;margin-left:10%;margin-right:5%;}
.mainContent h1{
    color:#582733;
  font-family: 'bebasregular';
font-size:50px;
  text-shadow: 3px 3px 0px rgba(154,144,126,0.5);
margin:2%;}
.mainContent h2{
      color:#582733;
  font-family: 'bebasregular';
font-size:25px;
  text-shadow: 3px 3px 0px rgba(154,144,126,0.5);
  text-align:center;
}
.mainContent p{
  margin:1% 1% 1% 4%;
}

.mainContent a{color:#e1834f;text-decoration:underline;}
.aside{float:left;display:inline;width:20%;margin-right:10%;}
.aside img{min-width:100px;max-width:100%;border:3px solid #FFF;}