JSFiddle - React, Tailwind, and code Playground
HTML
<div id="page-wrap">
<div id="box-one">
<a href="http://google.com" class="inside">Click in here One</a>
</div>
<div id="box-two">
<a href="http://google.com" class="inside">Click in here</a>
</div>
</div>
CSS
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#page-wrap {
width: 960px;
margin: 80px auto;
}
#page-wrap div {
width: 125px;
height: 125px;
border: 1px solid #ccc;
padding: 30px;
text-align: center;
float: left;
margin-right: 20px;
}
#page-wrap div a {
display: block;
width: 125px;
height: 125px;
border: 1px solid #ccc;
line-height: 125px;
padding: 0;
}
JavaScript
$(function() {
$("#page-wrap div").click(function() {
$(this).css("background", "yellow");
});
$("#box-one .inside").click(function(e) {
$(this).css("background", "green");
e.preventDefault();
});
$("#box-two .inside").click(function() {
console.log(1);
$(this).css("background", "green");
return false;
});
});