JSFiddle - React, Tailwind, and code Playground

by hectorubie

HTML

<div id="main_content">
              	
                  <ul class="categories_list">
                  
                      <li class="animated">
                         <a href="#propsal_templates" class="main_buttons">
                              <span class="category_list_titles">
                                  <table width="150" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                      <td height="150" align="center" valign="middle">Proposal Templates</td>
                                    </tr>
                                  </table>
                              </span>
                          </a>
                      </li>
                      
                      <li class="animated">
                         <a href="#2" class="main_buttons">
                              <span class="category_list_titles">
                                  <table width="150" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                      <td height="150" align="center" valign="middle">Site Lists</td>
                                    </tr>
                                  </table>
                              </span>
                          </a>
                      </li>

                  </ul>
                  
                  <div id="propsal_templates" class="document_wrapper" style="display:none;">
                          <div class="chat-bubble-arrow-border1"></div>
  						  <div class="chat-bubble-arrow1"></div>
                              <table width="950" border="0" cellspacing="10" cellpadding="10">
                                <tr>
                                  <td width="316" valign="middle">
                                  	<a href="test.docx">
                                    	<span class="icon powerpoint_icon"></span>
                                        <span...

CSS

/******** BUTTONS ********/
ul.categories_list, ul.categories_list li{
	margin:0;
	padding:0;
}

ul.categories_list li{
	list-style-type:none;
	float:left;
	margin-left:100px;
	margin-bottom:50px;
	width:247px;
	height:246px;
	display:block;
}

ul.categories_list li:first-child{
	margin-left:0px;
}

ul.categories_list li a.main_buttons{
	position:relative;
	width:247px;
	height:246px;
	display:block;
    
}

ul.categories_list li a.main_buttons{
	background:#444444;
    background-position:0 0;
}

ul.categories_list li a.main_buttons:hover{
	background:#cccccc;
	background-position:0 -289px;
}

ul.categories_list li a.main_buttons:active{
	background:#cccccc;
	background-position:0 -576px;
}


ul.categories_list li a.selected_button{
	background:#cccccc;
	background-position:0 -576px;
}

ul.categories_list li a.main_buttons .category_list_titles{
    height:150px;
	width:150px;
	font-size: 18px;
	font-weight:500;
	color: #FFF;
	text-align:center;
}

/******** document wrapper ********/
.document_wrapper{
    -moz-box-shadow: 0px 0px 3px #ccc;
    -webkit-box-shadow: 0px 0px 3px #ccc;
    box-shadow: 0px 0px 3px #ccc;
	display:block;
	width:950px;
	position:relative;
	margin-top:23px;
	border:1px solid #ccc;
	left:0;
	top:-25px;
	background:#fff;
	clear:both;
}

.chat-bubble-arrow1:after{
	content: "";
	position: absolute;
	top: -18px;
	left: 83px;
	border-style: solid;
	border-width: 0 37px 18px;
	border-color: #FFFFFF transparent;
	display: block;
	width: 0;
	z-index: 1;
}

.chat-bubble-arrow1:before{
	content: "";
	position: absolute;
	top: -19px;
	left: 83px;
	border-style: solid;
	border-width: 0 37px 18px;
	border-color: #ccc transparent;
	display: block;
	width: 0;
	z-index: 0;
}

.chat-bubble-arrow2:after{
	content: "";
	position: absolute;
	top: -18px;
	left: 430px;
	border-style: solid;
	border-width: 0 37px 18px;
	border-color: #FFFFFF transparent;
	display: block;
	width: 0;
	z-index: 1;
}

.chat-bubble-arrow2:before{
	content: "";
	position:...

JavaScript

//centers categories names
	jQuery.fn.center = function(){
		this.css("position","absolute");
		this.css("top","50%");
		this.css("left","50%");
		this.css("margin-top","-"+(this.height()/2)+"px");
		this.css("margin-left","-"+(this.width()/2)+"px");
		return this;
	}
	$(".category_list_titles").center();
	
	//button action
	$('ul.categories_list li a.main_buttons').click(function(e) {
        e.preventDefault();	
		
		var div = $(this).attr("href");
		//alert(div);
		
		if($(this).hasClass('selected_button'))
		{
			$(this).removeClass('selected_button');
			//$(''+div+'').fadeOut();
			$(''+div+'').slideUp(
				{ 
					duration: 500, 
					easing: 'easeInQuad',
			    }
			);
		}
		else
		{
		  $('ul.categories_list li a.main_buttons').each(function(i) {
			  $('ul.categories_list li a.main_buttons').removeClass('selected_button');
			  //$('.document_wrapper').css('display', 'none');
			  $('.document_wrapper').slideUp(
			  	{ 
					duration: 500, 
					easing: 'easeInQuad',
			    }
			  );
		  });
		  
		  $(this).addClass('selected_button');
		  //$(''+div+'').fadeIn();
		  $(''+div+'').slideDown(
		  	{ 
				duration: 500, 
				easing: 'easeInQuad',
			}
		  );
		}	
    });