JSFiddle - React, Tailwind, and code Playground

by aflynt

HTML

<div id="wrapper">
   
    <div id="menu">
        <span class="button pink form-button">open form</span>
        <span class="button green news-button">open news</span>
      <!--  <span class="button blue rightbutton">open right1</span>
        <span class="button green rightbutton">open right1</span>-->
    </div>
     <div id="form">Form</div>
    <div id="hotnews">News</div>
</div>


<!--<div>
		    	<h2>HOT NEWS</h2>
		    	<button id="view-archive-btn" class="btn active">View Archive</button>
		    	<button id="submit-story-btn" class="btn inactive">Submit A 
				Story</button>
	    	</div>
        
        <div id="show-news">Content 1</div>
        <div id="news-form">Content 2</div>-->

CSS

#wrapper {}
#menu {background:#fff;width:200px;height:400px;margin: 0 10px;float:left;}
#left {float:none;display:none;width:100px;height:300px;border:1px solid #ccc;}
#right {float:none;display:none;width:100px;height:300px;border:1px solid #ccc;}

.button {
	width: 198px;
	display: inline-block;
	float: left;
	clear: both;
	margin: 10px 0;
	font-size: 24px;
	font-family: Source Sans Pro;
	line-height: 49px;
	text-align: center;
	color: #444;
	font-weight: 600;
	text-shadow: 0px 1px 1px rgba(255,255,255,1), 0px -1px 0px rgba(0,0,0,1);
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.25) 5%,rgba(0,0,0,0) 100%);
	background-image:    -moz-linear-gradient(top, rgba(255,255,255,0.25) 5%,rgba(0,0,0,0) 100%);
	background-image:     -ms-linear-gradient(top, rgba(255,255,255,0.25) 5%,rgba(0,0,0,0) 100%);
	background-image:      -o-linear-gradient(top, rgba(255,255,255,0.25) 5%,rgba(0,0,0,0) 100%);
	background-image:         linear-gradient(top, rgba(255,255,255,0.25) 5%,rgba(0,0,0,0) 100%);
	-webkit-box-shadow: 0px 1px 2px 0px rgba(255,255,255,1)inset;
	-moz-box-shadow: 0px 1px 2px 0px rgba(255,255,255,1)inset;
	box-shadow: 0px 1px 2px 0px rgba(255,255,255,1)inset;
	border: solid 1px rgba(153,153,153,1);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	cursor: pointer;
}

.green {
	background-color: rgba(214,211,16,1);
}

.blue {
	background-color: rgba(137,143,234,1);
}

.pink {
	background-color: rgba(224,76,135,1);
}

.button:hover {
   background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.35) 15%,rgba(255,255,255,0.2) 100%);
   background-image:    -moz-linear-gradient(top, rgba(255,255,255,0.35) 15%,rgba(255,255,255,0.2) 100%);
   background-image:     -ms-linear-gradient(top, rgba(255,255,255,0.35) 15%,rgba(255,255,255,0.2) 100%);
   background-image:      -o-linear-gradient(top, rgba(255,255,255,0.35) 15%,rgba(255,255,255,0.2) 100%);
   background-image:         linear-gradient(top, rgba(255,255,255,0.35)...

JavaScript

$(document).ready(function(){

$('#form').hide();
    $('.form-button').click(function(){
      /*  if($('#form').is(':visible')) {
            $('#form').hide();
        }
        else {*/
        $('#hotnews').hide();
        $('#form').fadeIn();
       // }
    });
});

$(document).ready(function(){
	$('.news-button').click(function() {
       /* if ($('#hotnews').is(':visible')) {
              $('#hotnews').fadeOut();
            if ($("#hotnews").data('lastClicked') !== this) {
               $('#hotnews').fadeIn();
            }
        } 
		else {*/
			$('#form').hide();
			$('#hotnews').fadeIn();
	//	}
        $("#hotnews").data('lastClicked', this);
	});
});

$(document).ready(function(){


    $('.button').click(function() {  
        $('.button').not(this).removeClass('buttonactive');
        $(this).toggleClass('buttonactive');
        
    });
});

$(document).ready(function(){
    $('.btn').click(function() {  
        $('.btn').not(this).removeClass('buttonactive');
        $(this).toggleClass('buttonactive');
        
         if ($('#view-active-btn').hasClass('buttonactive')){
    	$('#show-news').css('display','block');
      $('#news-form').css('display','none');
    }
    if ($('#submit-story-btn').hasClass('buttonactive')){
    	$('#news-form').css('display','block');
      $('#show-news').css('display','none');
    }
    });
    
   /* if $('#view-active-btn').hasClass('buttonactive'){
    	$('#show-news').css('display','block');
      $('#news-form').css('display','none');
    }
    if $('#submit-story-btn').hasClass('buttonactive'){
    	$('#show-news').css('display','block');
      $('#news-form').css('display','none');
    }*/
    
});