JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<script src="http://ruler.hilliuse.com/ruler/jquery.ruler.js"></script>
	<div id="rectangle">
		</div>
    check

CSS

#rectangle {				
    width: 300px;
    height: 200px;
    border: 1px solid black;
    padding: 0px !important;
}
.ruler {
    background: rgba(255,255,255,1);
    color: #444;
    font-family: source code pro, "Arial Narrow", "Helvetica Neue", Helvetica, Arial, Veranda, sans-serif;
    font-size: 12px;
    line-height: 14px;
    overflow: hidden;
}
.ruler > div {
    background: #444;
}
.hRule {
    position: fixed;
    width: 100%;
    height: 18px;
    left: 0px;
    top: 0px;
    
    border-bottom: 1px solid;
    z-index: 9;
}
.vRule {
    position: absolute;
    
    min-height: 100%;
    width: 18px;
    left: 0px;
    top: 0px;
    
    border-right: 1px solid;
    z-index: 9;

}
.corner {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 18px;
    height: 18px;
    border-right: 1px solid;
    border-bottom: 1px solid;
    z-index: 10;
}
.hRule .tickLabel {
    position: absolute;
    top: 0px;
    width: 1px;
    height: 100%;
    text-indent: 1px;
}
.hRule .tickMajor {
    position: absolute;
    bottom: 0px;
    width: 1px;
    height: 6px;
}
.hRule .tickMinor {
    position: absolute;
    bottom: 0px;
    width: 1px;
    height: 4px;
}
.vRule .tickLabel {
    position: absolute;
    right: 0px;
    height: 1px;
    width: 100%;
    text-indent: 1px;
}
.vRule .tickLabel span {
    display: block;
    position: absolute;
    
    top: 1px;
    right: 0px;
    margin-right: 18px;
    
    -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
    
    -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -ms-transform-origin: top right;
  -o-transform-origin: top right;
  transform-origin: top right;
    
}
.vRule .tickMajor {
    position: absolute;
    right: 0px;
    height: 1px;
    width: 6px;
}
.vRule .tickMinor {
    position: absolute;
    right: 0px;
    height: 1px;
    width: 4px;
}

.vMouse {
   ...

JavaScript

$(function() {
$('#rectangle').ruler({
					vRuleSize: 18,
					hRuleSize: 18,
					showCrosshair : true,
					showMousePos: false
				});     
});

 hilliuse / ruler

Code  Issues 3  Pull requests 3  Pulse
jquery.ruler.js

/**
 * jQuery.Ruler v1.1
 * Add Photoshop-like rulers and mouse position to a container element using jQuery.
 * http://ruler.hilliuse.com
 * 
 * Dual licensed under the MIT and GPL licenses.
 * Copyright 2013 Hillius Ettinoffe http://hilliuse.com
 */
;(function( $ ){

	$.fn.ruler = function(options) {

		var defaults = {
			vRuleSize: 18,
			hRuleSize: 18,
			showCrosshair : true,
			showMousePos: true
		};//defaults
		var settings = $.extend({},defaults,options);

		var hRule = '<div class="ruler hRule"></div>',
				vRule = '<div class="ruler vRule"></div>',
				corner = '<div class="ruler corner"></div>',
				vMouse = '<div class="vMouse"></div>',
				hMouse = '<div class="hMouse"></div>',
				mousePosBox = '<div class="mousePosBox">x: 50%, y: 50%</div>';

		if (!Modernizr.touch) {
			// Mouse crosshair
			if (settings.showCrosshair) {
				$('body').append(vMouse, hMouse);
			}
			// Mouse position
			if (settings.showMousePos) {
				$('body').append(mousePosBox);
			}
			// If either, then track mouse position
			if (settings.showCrosshair || settings.showMousePos) {
				$(window).mousemove(function(e) {
					if (settings.showCrosshair) {
						$('.vMouse').css("top",e.pageY-($(document).scrollTop())+1);
						$('.hMouse').css("left",e.pageX+1);
						//-($(window).scrollTop())
					}
					if (settings.showMousePos) {
						$('.mousePosBox').html("x:" + (e.pageX-settings.vRuleSize) + ", y:" + (e.pageY-settings.hRuleSize) ).css({
							top: e.pageY-($(document).scrollTop()) + 16,
							left: e.pageX + 12
						});
					}
				});
			}
		}

		//resize
		$(window).resize(function(e){
			var $hRule = $('.hRule');
			var $vRule = $('.vRule');
			$hRule.empty();
			$vRule.empty().height(0).outerHeight($vRule.parent().outerHeight());

			//...