JSFiddle - React, Tailwind, and code Playground

by maysamsh

HTML

<link rel="stylesheet" href="http://sohadanesh.com/maysam/style/custom-ui.css">
<link rel="stylesheet" href="http://sohadanesh.com/maysam/style/jquery-ui-1.8.14.css">
<link rel="stylesheet" href="http://sohadanesh.com/maysam/style/chosen.css">
<link rel="stylesheet" href="http://sohadanesh.com/maysam/style/nazanin-font.css">
<link rel="stylesheet" href="http://sohadanesh.com/maysam/style/titr-font.css">
<script src="http://sohadanesh.com/maysam/js/uikit.min.js"></script>
<script src="http://sohadanesh.com/maysam/js/chosen.jquery.min.js"></script>
<script src="http://sohadanesh.com/maysam/js/jquery.ui.core.js"></script>
<div id="wrapper1">
            <div id="wrapper2">
                <div id="header">
                           
                </div>
                <div id="maincol">
                    <div id="leftcol">
                        left menu
                        <!-- end leftcol -->
                    </div>
                    <div id="rightcol">
                      right menu
                        <!-- end rightcol -->
                    </div>
                    <div id="centercol">
                        <h1>foo form</h1>
                        <hr />
                        <div>
                            <div class="uk-form-row">
                                <label for="frmProject" class="uk-form-label">the list</label>
                                <div class="fix-select uk-form-controls">
                                    <select name="frmProject" id="frmProject" class="chosen-select chosen-rtl">
	<option value="1">jason</option>
	<option value="2">mark</option>
    <option value="3">colin</option>
</select>
                                </div>
                            </div>
                            <div class="uk-form-row">
                                <label for="frmDate" class="uk-form-label">date</label>
                                <input name="frmDate" type="text" id="frmDate"...

CSS

h1 {
    color: #666;
    text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
    font-family:'WebTitr', Arial !important;
}
.block
{
    display: block !important;
}
.ltr
{
    text-align:left !important;
    direction:ltr !important;

}
.center
{
    text-align:center !important;
}
.fullWidth
{
    display: block !important;
    width: 100%;
}
.justified
{
    text-align:justify !important;
    direction:rtl;
}
.colorBlue
{
    color:#192fcf !important;
}
.bevelWhite
{
    text-shadow: 0px 1px 0px #fff;
}
.boldFont
{
    font-weight: bold;
}
.indent
{
    margin-right: 8px;
}
.fontNazanin
{
    font-family: 'WebNazanin',Arial;
}
.rtl
{
    direction: rtl;
    text-align:right;
}
.fontSize26
{
    font-size: 26px;
}
.fontSize20
{
    font-size: 20px;
}
.fontSize22
{
    font-size: 22px;
}
.fontSize16
{
    font-size: 16px;
}
.fontSize15
{
    font-size: 15px;
}
.fontSize18
{
    font-size: 18px;
}
.fontBold
{
    font-weight:bold;
}
body {
	text-align:center;
	margin:0px;
	padding:0;
    background-image:url('http://sohadanesh.com/maysam/images/pixel_weave.png');
    background-repeat:repeat;
    font-size: 130%;
    font-family: 'WebNazanin', Arial;
    text-align:right;
    direction:rtl;
}
body * 
{
    font-family: 'WebNazanin', Arial;
    text-align:right;
    direction:rtl;
}
#wrapper1 {
	position:relative;
	width:100%;
    min-width:950px;
    margin-top:0;
}
#wrapper2 {
	position:relative;
	text-align:left;
	width:100%;	
}
#header {
    background-color:#ccc;
    background-repeat:repeat-x;
    background-image:url('http://sohadanesh.com/maysam/images/tweed.png');
    background-repeat:repeat;
	margin:0;
    height:40px;
	text-align:center;
    /*box-shadow: inset 1px 4px 9px -6px;*/ 
    /*box-shadow: 0 8px 6px -6px black;*/
}
#header a
{
    text-decoration:none !important;
    color:#fff !important;
    
}
#header a:hover
{
    text-decoration: underline !important;
}



#maincol {
	position:relative;
	margin: 0;
	padding:0px;
}
#leftcol {...

JavaScript

var config = {
        '.chosen-select': {},
        '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' }
    }
    for (var selector in config) {
        $(selector).chosen(config[selector]);
    }