JSFiddle - React, Tailwind, and code Playground

by Sandra Caroline Hansen

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<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="bluetwitter-header">  
<div class="headertexttwitter-header">
<div class="twitterimgage-header">
<img src="https://i.imgsafe.org/c2edfe021e.png" alt="" class="twitterimgage-header"> 
Twitter 
</div>
</div>
</div>
<div class="wholeboxfortwitteradd-twitterwholebox">
<div class="NAMEUSERNAMEWHOLESMALLSTATSBOX-SMALLSTATS">
<div class="TWITTERIMAGEBEFORENAMEANDUSERNAME-SMALLSTATS"> 
<div class="USERNAMEUNDERFULLNAME-SMALLSTATS"><img src="https://i.imgsafe.org/c2e7b2f5e7.png" alt="" class="allusmallstatshere-SMALLSTATS"> </div>
</div><div class="FULLNAMETWITTER-SMALLSTATS"> <div class="RETWEETREPLAYLIKE-SMALLSTATS">Sandra Caroline Hansen</div>
<div class="USERNAMETWITTER-SMALLSTATS">@goldiego</div></div>
<div class="COLUMNTWITTERREPLAYRETWEETLIKE-SMALLSTATS"> 
<img src="http://i63.tinypic.com/2yyqgi1.png" alt="" class="allusmallstatshere-SMALLSTATS"> 
</div>
<div class="COLUMNTWITTERREPLAYRETWEETnumbers-SMALLSTATS"> 672 </div>
<div class="COLUMNTWITTERREPLAYRETWEETLIKE-SMALLSTATS"> 
<img src="http://i64.tinypic.com/98alfm.png" alt="" class="allusmallstatshere-SMALLSTATS"> 
</div>
<div class="COLUMNTWITTERREPLAYRETWEETnumbers-SMALLSTATS"> 761</div>
<div class="COLUMNTWITTERREPLAYRETWEETLIKEheart-SMALLSTATS"> 
<img src="http://i68.tinypic.com/a5g7qw.png" alt="" class="allusmallstatshereheart-SMALLSTATS"> 
</div>
<div class="COLUMNTWITTERREPLAYRETWEETnumbers-SMALLSTATS"> 122K</div>
</div>
<div class="profileimageandcontenthere-TWITTERCONTENT">
<div class="secondbox-twittercontent"> 
<div class="baraligneduponbox-twittercontent"> 
<img src="https://i.imgsafe.org/c2dafa2307.png" alt="" class="profileimgherewithroundcorners-twittercontent">...

CSS

/*whole box*/ 

.wholeboxfortwitteradd-twitterwholebox {
  height:387px;
  width:401px;
  float:left;
}

/* BLUE HEADER */
.bluetwitter-header {
	width: 100%;
	height: 34px;
	background-color: #55acee;
  padding-top: 1px;
}
.headertexttwitter-header {
	color: #ffffff;
	font-weight: normal;
	margin-left: auto;
	letter-spacing: 2px;
	margin-right: auto;
	text-align: left;
  font-family: "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif";
  padding-left: 32px;
	font-size: 13px;
}
.twitterimgage-header {
  height:16px;
  padding-top:4px;

}
body {
	font-family: "Helvetica Neue", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: 62.5%;
  background: transparent;
  margin: 0;
}
/* RETWEETS and FAVORITES with images BOX*/
.optionfortwitterSTATS{ 
background-color: #ffffff; 
width: 380px;
padding-left:37px;
padding-bottom: 18px;
}
.leftretweetsfortwitterSTATS {
    display: table-cell;
    width:82px;
    height: 42px;
    float: left;
    margin: 0px;
    color: #66757f;
    font-family: arial;
    padding: 0px 10px;
    border: 1px solid #e1e8ed;
    font-size: 11px;
    font-weight: normal;
    line-height: 13px;
}
.middlefavoritesfortwitterSTATS {
    display: table-cell;
    width:82px;
    height: 42px;
    float: left;
    margin: 0px;
    color: #66757f;
    font-family: arial;
    padding: 0px 10px;
    border: 1px solid #e1e8ed;
    font-size: 11px;
    font-weight: normal;
    line-height: 13px;   
}
.rightuserfortwitterSTATS {
    display: table-cell;
    width: 109px;
    height: 22px;
    margin: -1px;
    color: #66757f;
    font-family: arial;
    border: 1px solid #e1e8ed;
    overflow: hidden;
    margin: -1px;
    color: #66757f;
    font-family: arial;
    padding: 10px 14px;
    border: 1px solid #e1e8ed;
    overflow: hidden;
}
.amountofretweetsinoptionSTATS {
    color: #292f33;
    margin-top: -5px;
    margin-bottom: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
   ...

JavaScript

$(function() {
    $( "#resizable" ).resizable();
  });