JSFiddle - React, Tailwind, and code Playground

by pramendra

HTML

<script src="http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.pack.js"></script>
<link rel="stylesheet" href="http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.css">
<script src="http://jquery-star-rating-plugin.googlecode.com/svn/trunk/delete.gif"></script>
<script src="http://jquery-star-rating-plugin.googlecode.com/svn/trunk/star.gif"></script>
<html>
<head>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.1/build/cssgrids/grids-min.css">
<link href="review.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <form id="test">
    <div class="review yui3-g">
        <label class="element label yui3-u-1-3">somalier</label>
        <div class="element field yui3-u-2-3">
            <input name="star1" type="radio" value=1 class="star1"/>
            <input name="star1" type="radio" value=2 class="star1"/>
            <input name="star1" type="radio" value=3 class="star1"/>
            <input name="star1" type="radio" value=4 class=" star1"/>
            <input name="star1" type="radio" value=5 class="star1"/>
        </div>
        
      <label class="element label yui3-u-1-3">Headline</label>
      <input class="element field yui3-u-2-3" name="headline" type="text" />
      <label class="element label yui3-u-1-3">
        Review
      </label>
      <textarea class="element field yui3-u-2-3" name="review"></textarea>
      <label class="element label yui3-u-1-3">
        Email
      </label>
      <input class="element field yui3-u-2-3" name="email" type="text" />
      <label class="element label yui3-u-1-3">
        &nbsp;
      </label>
      <input class="element field yui3-u submit" type="submit"  value="submit" />
    </div>
  </form>
</body>
</html>

SCSS

.review{
  width: 400px;
  background: #eee;
    .element{
  margin: 0 0 5px 0;
}
.label{
  color:#666;
  padding-left: 2%;
}
.field{
  margin-left: -2%;
}

}

JavaScript

$(function() {
    $('.star1').rating();
    $('.star111').rating({
/*
        callback: function(value, link) {
            alert(value);
        }
        */
    });

    $("#test").submit(function() {
        console.log($(this).serialize());
        return false;
    });

});