JSFiddle - React, Tailwind, and code Playground
HTML
<div class="ooh-large">
<label class="ohh-large-number">100</label>
<label class="ohh-large-percent">%</label>
<label class="ooh-large-heart">♡</label>
<label class="ooh-large-question">What you think?</label>
<button name="yes" class="ooh-button red">♡</button>
<button name="no" class="ooh-button upsidedown">♡</button>
</div>
<hr/>
<button name="save" class="green hide">Update</button>
<button name="update" class="blue">☹ ☺ ☻ Set as Profile</button>
<button name="update" class="blue">View full size</button>
<button name="update" class="green" style="display:block;">Add to My Closet</button>
<button name="delete" class="">View</button>
<br/>
<button name="cancel" class="">
<label style="font-size: 160%; line-height: 100%;">♡ 369</label> Liked</button>
<button name="cancel" class="">
<label style="font-size: 160%; line-height: 100%;">☹ 13</label> Disliked</button>
<br/>
<button name="like" class="ohh-button percent red">
<label class="ohh-large-number">100</label>
<label class="ohh-large-percent">%</label>♡</button>
<button name="dislike" class="ohh-button percent">
<label class="ohh-large-number">3</label>
<label class="ohh-large-percent">%</label>☹</button>
<hr/>
<input class="" type="text" maxlength="2048" name="regInput" placeholder="Describe this look" />
<input class="search" id="SearchBox" type="text" maxlength="2048" name="q" placeholder="Find" />
<hr/>
<div class="dialog-overlay hide"></div>
<div class="dialog hide" role="dialog" style="left: 10%; top: 20%; ">
<div class="dialog-header">
<span class="dialog-header-title">Share this post</span>
<span class="dialog-header-close" style="display: block;"></span>
</div>
<div class="dialog-content">Test</div>
</div>
<hr/>
<select class="KY">
<option value="91">People I follow</option>
<option value="1" selected="">Mine</option>
</select>
<select class="KY">
...
CSS
.hide { display: none; }
hr { border: 1px dotted #ddd; border-left: 0; border-right: 0; border-top: 0; }
select { height: 29px; }
/* Buttons Elements */
button {
background: #F3F3F3;
background: -webkit-gradient(linear,left top,left bottom,from(whiteSmoke),to(#F1F1F1));
background: -moz-linear-gradient(top,whiteSmoke,#F1F1F1);
background: -o-linear-gradient(top,whiteSmoke,#F1F1F1);
border: solid 1px #D9D9D9;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
color: #666;
font-weight: bold;
margin: 1px;
padding: 6px 12px;
transition: all .218s ease;
-o-transition: all .218s ease;
-moz-transition: all .218s ease;
-webkit-transition: all .218s ease;
}
button:hover {
background: whiteSmoke;
background: -webkit-gradient(linear,left top,left bottom,from(#F8F8F8),to(#F1F1F1));
background: -moz-linear-gradient(top,#F8F8F8,#F1F1F1);
background: -o-linear-gradient(top,#F8F8F8,#F1F1F1);
border: solid 1px silver;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
color: #333;
}
button:active {
background: #F4F4F4;
background: -webkit-gradient(linear,left top,left bottom,from(#F6F6F6),to(#F1F1F1));
background: -moz-linear-gradient(top,#F6F6F6,#F1F1F1);
background: -o-linear-gradient(top,#F6F6F6,#F1F1F1);
border: solid 1px #BBB;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
color: #333;
}
button.blue {
background: #4D90FE;
background: -webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#4787ED));
background: -moz-linear-gradient(top,#4D90FE,#4787ED);
background: -o-linear-gradient(top,#4D90FE,#4787ED);
border: solid 1px #3079ED;
color: white;
}
button.blue:hover {
background: #357AE8;
background:...