JSFiddle - React, Tailwind, and code Playground

by Sandra Caroline Hansen

HTML

<section class="overlaybox">
    
     <title>Instagram widget</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
<div id="resizable" class="ui-widget-content">  
<div class="container"> 
<header class="header">  
<h1 class="headertext">
<td class="twitimg">
<img src="http://i66.tinypic.com/xe302h.png" alt="" class="twitimg"> </td>    
<td>Usernamehere</td> 
</h1>
</header>
</div>
<div class="intro">
<div class="wholebox">
<div class="retweetwrapperactions">
    <div class="replybox15">
    <a class="crop"  title="img">
    <img src="http://i66.tinypic.com/b8thro.jpg" class="orginaluserimagesize" alt="css template" />
    </a>
    </div>
    <div class="replybox49">
    <h2>
    <td class="twitimg11">
 </td>
 Username_placeholderhere 
 </h2>
 <h2>   
 </div>
  <div class="likebox13">
<h3>1h 33m
</h3>
</div>        
</div>
<div class="boxtextandimage">
<div class="retweetwrapperactionshg">
    <div class="replyboxhg">
    <a class="crophg">
    <img src="http://i66.tinypic.com/b8thro.jpg" class="orginaluserimagesizehg" />
    </a>
    </div>     
</div>
<td class="date">
<div class="textblock">
<div class="textblock4">
</div>sandra is visiting er her som er i v sandra is visiting er her eksempel som er i
</div>
</td>     
</div>
</div>
</div>
    <section class="pinimg"> 
    <div class="pinimg">
    <img src="http://i68.tinypic.com/zvoxw.png" alt="" class="pining">
    </div>
    </section>
    
    
</section>    
</div>   
</section>

CSS

.pinimg{
    margin: 0px;
    padding: 0px;
      float: left;
    margin: -1px;
    width: 193px;
    color: #66757f;
    font-family: arial;
    height: 41px;
    padding-left: 5px;
} 
.overlaybox{
    margin: 0px;
    padding: 0px;
      float: left;
    margin: -1px;
    width: 593px;
    color: #66757f;
    font-family: arial;
    height: 41px;
    padding-left: 5px;
} 
body {
    background-image: url(http://i63.tinypic.com/okq5ib.jpg);
    background-repeat: repeat;
    color: black;
}
#container{
    width: 960px;
    margin: 100px auto;
}
.datehere{
    margin: auto;
    width: 300px; 
    height: 300px;
    background: yellow; /* Fallback */
    background: -webkit-gradient(linear,0% 0%,0% 100%,from(#EBEB00), to(#C5C500));
    background: -moz-linear-gradient(100% 100% 90deg,#C5C500,#EBEB00);
    padding: 20px 20px 20px 20px;
        -webkit-box-shadow: 0px 10px 30px #000;
        -moz-box-shadow: 0px 10px 30px #000;
}
.stickyNote{
    margin: auto;
    font-family: arial;
    line-height: 19px;
    text-align: center;
    font-size: 20px;
    width: 260px;
    height: 300px;
    background: yellow;
    background: -webkit-gradient(linear,0% 0%,0% 100%,from(#EBEB00), to(#C5C500));
    background: -moz-linear-gradient(100% 100% 90deg,#C5C500,#EBEB00);
    padding: 20px 40px 20px 40px;
   -webkit-box-shadow: 0px 10px 38px #111;
    -moz-box-shadow: 0px 10px 30px #111;
}
.stickyNote h1 {
    font-size: 24px;
    float: right;
    font-family: Helvetica, sans-seriff;
}
.stickyNote p {
    font-family: Helvetica, sans-seriff;
    font-size: 30px;
    line-height: 35px;
    margin: 60px 0px 13px 0;
    text-align: center;
}

h2 {
    color: #292f33;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    font-size: 14px;
    padding-left: 2px;
    float: left;
    height: -1px;
    padding-top: 10px font-family: "Helvetica Neue";
}
h3 {
    color: #66757f;
    font-weight: normal;
    margin-left: auto;
   ...