JSFiddle - React, Tailwind, and code Playground

by sonali_moholkar

HTML

<br> <br> 
<marquee><b>  Forbes.com </b> </marquee> <br>  
<p> Hey you :D 
hdg</p> 
<br> 
<textarea>  </textarea>
<section id="bio">

<h3>Bradley Cooper</h3>
<div>
<img src="../images/johnny_100.jpg" width="50"
height="50" alt="Bradley Cooper"/>
<p>Content about Bradley Cooper</p>
</div>
<h3>Sachin Tendulkar</h3>
<div>
<img src="../images/glenda_100.jpg" width="50"
height="50" alt="Sachin Tendulkar"/>
<p>Content about Sachin Tendulkar</p>
</div>
</section>
<b1 id=link > This is a Forbes.com link </b1>
<table id="stars" class="data" >
<table border="2">
    <input type="button" id="hideButton" value="hide" />
    <br> <br> <br>
    <input type="button" id="showButton" value="show" >
    
    <br>
    <br>
    <br>
    <br>
    <thead>
<tr>
 
    <th><b> ID </b></th>
    <th><b> Name </b></th>
    <th><b> Occupation </b></th>
    <th><b>Approx. Location</b></th>
    <th><b>Price </b></th>
</tr>
   
    </thead>  
        <tr>
    <td>ab1 </td>
     <td> SRK</td>
     <td> actor</td>
    <td> Mumbai </td>
     <td> 50</td>
<tr>
     <td>ab2 </td>
     <td>Bradley Cooper</td>
     <td> actor</td>
    <td> NY </td>
     <td> 60</td>
       
    <tr>
     <td>ab3 </td>
     <td>Robert P</td>
     <td> actor</td>
    <td> DC </td>
        <td> 45</td>
         </tr>
    <tr>
     <td>ab4 </td>
     <td>Sachin Tendulkar</td>
     <td> cricket</td>
    <td> Pune </td>
     <td> 100</td>
    </tr>

CSS

tr.zebraHover {
background-color: grey;
}

JavaScript

$(document).ready(function() {

    $(' tbody tr:even').css({'background-color': ' pink' , 'color': 'grey'});
   alert ($(' tbody tr:first').css('font-size'));
    
    $('#hideButton').click(function() {
$('b').fadeOut(3000);
        });
    
    $('#showButton').click(function() {
      $('b').fadeIn(3000);
       
});
   $('p').animate({
padding: '20px',
fontSize: '30px'
}, 5000);
     $(' tbody tr').mouseover(function() {
$(this).addClass('zebraHover');
});
$(' tbody tr').mouseout(function() {
$(this).removeClass('zebraHover');
});
   
 $('#link').hover(function() {
$(this).animate({paddingLeft: '+=300px'}, 300 );
}, function() {
$(this).animate({paddingLeft: '-=300px'}, 300 );
});  
 
});