JSFiddle - React, Tailwind, and code Playground

by vijayphani

HTML

<form id="form1" runat="server">
<div id="divpar" class="divpar" style="height: 204px; width: 204px;">
<div id="divchi" class="divchi" style="height: 200px; width: 200px; position: relative;
top: 2px; left: 2px">
<table cellspacing="2" cellpadding="2" width="100%">
<tr>
<td>

<span class="spntitle">Welcome</span>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas.Donec eu libero sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas.Donec eu libero sit amet. egestas.Donec eu libero sit amet ristique senectus et netus </p>
</td>
</tr>
<tr>
<td>
<span class="spnfoot">All right reserved.</span>
</td>
<td>
</td>
</tr>
</table>
</div>
</div>
</form>

CSS

body
{
background: #CCCCCC;
font-family: Verdana;
font-weight: lighter;
font-size: 11px;
}


.divpar
{
background-color: #FFFFFF;
border-radius: 8px 8px 8px 8px;
}
.spntitle
{
font-family: Verdana;
font-weight: lighter;
font-size: 12px;
color: #CCCCCC;
}


.spnfoot
{
font-family: Verdana;
font-weight: lighter;
font-size: 12px;
color: #CCCCCC;
}


.divchi
{
background-color: #FFFFFF;
border-radius: 8px 8px 8px 8px;
}

JavaScript

$(function() {
$('#divchi').mouseenter(function() {

$('#divpar').css("background-color", "#FF0000");
});

$('#divchi').mouseleave(function() {
$('#divpar').css("background-color", "#FFFFFF");
});
});