JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<div class="four-column clearfix static">
                    <div class="table-border">
                        <table class="generic-table">
                            <thead>
                                <tr>
                                    <th>User ID</th>
                                    <th>Badge no</th>
                                    <th>Name</th>
                                    <th>Screen name</th>
                                    <th>&nbsp;</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>101</td>
                                    <td>Clive Ambrose</td>
                                    <td>Clive</td>
                                    <td><a class="button-small" href="#"><span class="icon-small edit-icon"></span><span style="display:none" class="icon-small close-icon"></span><span class="label">Edit user</span><span style="display:none" class="label">Close</span>
                                    </a>
                                    <div class="validation success table-validation">
                                        <p>User details amended successfully</p>
                                    </div>
                                    </td>
                                </tr>
                                <tr class="hidden-tr">
                                    <td colspan="5">
                                    <div class="slide hidden-user">
                                        <form class="form">
                                            <ol>
                                                <li>
                                                    <label>Name</label>
                                                    <input type="text" class="input-text" value="Clive Ambrose">
                                      ...

CSS

/* -----------------------------------------------
1. SITE MASTER SETUP
----------------------------------------------- */

/* Imported mostly from Tripoli reset.css - http://www.monc.se/tripoli/css/reset.css */
* { margin:0; padding:0; text-decoration:none; outline:none } code, kbd, samp, pre, tt, var, textarea, input, isindex, listing, xmp, plaintext { font:inherit } a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border:none } table { border-collapse:collapse; border-spacing:0 } caption, th, td, center { text-align:left; vertical-align:middle } q { quotes:"" "" } font { color:inherit !important; font:inherit !important; color:inherit !important } marquee { overflow:inherit !important; -moz-binding:none } blink { text-decoration:none } nobr { white-space:normal }
/* end of import */
section, article, aside, header, footer, nav, figure, hgroup { display:block }
body { height:100%; text-align:center; background:#f1f1f1 url(../images/backgrounds/bg.png) repeat-y 50% 0}
body.login {background:#093e67}
body.dashboard {background:#f1f1f1}
ul { list-style:disc outside }
ol { list-style:decimal outside }

/* 2.2 - general */
html { font-size:62.5%; font-family:arimo; line-height:1.4em; color:#606060; height:100%;}
code, kbd, samp, pre, tt, var, input, input[type='password'], textarea { font-size:1.1em; font-family:arimo }

/* 2.3 - titles */
h1 { font-size:2.6em }
h2 { font-size:2.4em }
h3 { font-size:2.2em }
h4 { font-size:2.0em }
h5 { font-size:1.8em }
h6 { font-size:1.6em }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-style:normal; text-rendering:optimizeLegibility }

header h1 { color:#fff; text-transform:uppercase; text-shadow:0px 1px 2px rgba(0,0,0,.6); font-size:4em; padding-top:1.5em }
.primary-content h1 {font-size:3.4em; font-weight:normal; color:#012848; margin-bottom:20px}
.primary-content h2 {margin-bottom-20px; padding-bottom:20px; border-bottom:1px solid #e1e2e4;}
.primary-content hgroup {border-bottom:1px solid...

JavaScript

$(function() {
	$.fn.slideFadeToggle  = function(speed, easing, callback) {
		return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
	};
		$('tr:nth-child(4n)').addClass("zebra")
		.prev().addClass("zebra")
		.prev().addClass("normal")
		.prev().addClass("normal");
		$('.hidden-user').hide()
					
	$('td .button-small').click(function(e) {
		e.preventDefault();
		e.stopPropagation();
		var toggledelement = $(this).closest('tr').next().find('.hidden-user');				
		$(toggledelement).slideFadeToggle('slow');
		$('.hidden-user').not(toggledelement).slideUp('slow');

	});
	
	$("button#complete").click(function () {	
		$(this).closest(".form").find('.loading').delay(100).fadeIn(1400).delay(2000).fadeOut(700);		
		$(this).closest(".hidden-user").delay(1600).slideFadeToggle('slow');
		$(this).parents('tr').prev().find('.table-validation').delay(1600).fadeIn(700).delay(2000).fadeOut(700);
		return false;
    });
	
	$("button#close").click(function () {
		$(this).closest(".hidden-user").delay(200).slideFadeToggle('slow');
		return false;	
	});
});