JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<h1>h1</h1>


<h2>h2</h2>


<h3>h3</h3>


<h4>h4</h4>


<h5>h5</h5>


<h6>h6</h6>

<br />
<br />

<h1>h1 + <small>small</small></h1>


<h2>h2 + <small>small</small></h2>


<h3>h3 + <small>small</small></h3>


<h4>h4 + <small>small</small></h4>


<h5>h5 + <small>small</small></h5>


<h6>h6 + <small>small</small></h6>

<br />
<br />
<ul>
    <li>ul > li</li>
    <li>ul > li</li>
</ul>
<br />
<br />
<ol>
    <li>ol > li</li>
    <li>ol > li</li>
</ol>
<br />
<br />
<ul class="unstyled">
    <li>ul.unstyled > li</li>
    <li>ul.unstyled > li</li>
</ul>
<br />
<br />
<ol class="unstyled">
    <li>ol.unstyled > li</li>
    <li>ol.unstyled > li</li>
</ol>
<br />
<br />
<hr>
<br />
<br />
<strong>strong</strong>

<br />
<br />
<input type="text" value="input" style="display: block;">
<input type="text" value="input inputMini" class="inputMini" style="display: block;">
<input type="text" value="input inputSmall" class="inputSmall" style="display: block;">
<input type="text" value="input inputMedium" class="inputMedium" style="display: block;">
<input type="text" value="input inputLarge" class="inputLarge" style="display: block;">
<input type="text" value="input inputXlarge" class="inputXlarge" style="display: block;">
<input type="text" value="input inputXxlarge" class="inputXxlarge" style="display: block;">
<br />
<br />
<textarea style="display: block;margin: 5px;width: 500px;height: 100px;">textarea</textarea>
<br />
<br />
<div class="btn btnLarge">btnLarge</div>
<div class="btn btnLarge active">btnLarge active</div>
<div class="btn btnLarge disabled">btnLarge disabled</div>
<br />
<br />
<div class="btn">btn</div>
<div class="btn active">btn active</div>
<div class="btn disabled">btn disabled</div>
<br />
<br />
<div class="btn btnSmall">btn btnSmall</div>
<div class="btn btnSmall active">btn btnSmall active</div>
<div class="btn btnSmall disabled">btn btnSmall disabled</div>
<br />
<br />
<div class="btn btnMini">btn btnMini</div>
<div class="btn btnMini active">btn...

CSS

/* default */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, button {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent
}
/* clearfix */
 .clearfix:before, .clearfix:after {
    display:table;
    content:""
}
.clearfix:after {
    clear:both
}
/* relative */
 div, a, button {
    position:relative
}
/* h1-h6 */
 h1, h2, h3, h4, h5, h6 {
    margin:0;
    font-family:inherit;
    font-weight:300;
    color:inherit;
    text-rendering:optimizelegibility
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    font-weight:normal;
    color:#999
}
h1 {
    font-size:30px;
    line-height:38px
}
h1 small {
    font-size:18px
}
h2 {
    font-size:22px;
    line-height:36px
}
h2 small {
    font-size:18px
}
h3 {
    line-height:27px;
    font-size:18px;
    margin-bottom:7px
}
h3 small {
    font-size:14px
}
h4, h5, h6 {
    line-height:18px
}
h4 {
    font-size:14px;
    margin-bottom:7px
}
h4 small {
    font-size:12px
}
h5 {
    font-size:12px
}
h6 {
    font-size:11px
}
/* hr */
 hr {
    margin:18px 0;
    border:0;
    border-top:1px solid #eee;
    border-bottom:1px solid #fff
}
/* strong */
 strong {
    font-weight:bold
}
/* ul,ol */
 ul, ol {
    padding:0;
    margin:0 0 9px 25px
}
ul ul, ul ol, ol ol, ol ul {
    margin-bottom:0
}
ul {
    list-style:disc
}
ol {
    list-style:decimal
}
li {
    line-height:20px
}
ul.unstyled, ol.unstyled {
    margin-left:0;
    list-style:none
}
/* input,textarea,select */
 input, textarea, select {
    display:inline-block;
    vertical-align:middle;
    width:210px;
    height:18px;
    padding:4px;
    margin-bottom:9px;
   ...