JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<header>This is header of the sample </header>
	<br/>
	<div class="div-list">
		<div class="section"><h2>Test 1</h2></div>
		<div class="section"><h2>Test 2</h2></div>
		<div class="section"><h2>Test 3</h2></div>
	</div>
	<br/>
	<footer><h3>This is footer of the sample </h3></footer>
</div>

CSS

.container {
    width: 400px;
	margin:0 auto;
}
.section {
    height: 50px;
	margin:10px;
    background-color: red;
    color: white;
    box-shadow: 3px 3px 15px rgba(102, 102, 102, 0);
    border: 1px solid rgba(0, 0, 0, 0);
	opacity: .3;
}

.section2 {
    height: 50px;
    background-color: green;
    color: white;
	margin:10px;
    opacity: 1 !important;
    box-shadow: 3px 3px 15px #666;
    border: 1px solid #7d7d7d;
}

JavaScript

$(function() {
  $('.section').click(function() {
    $('.section2').removeClass('section2');
    $(this).addClass('section2');
    $(".container").css({"background-color": "rgba(0,0,0,0.7)"});
  });
  
  $("body").click(function(e) {
        if (e.target.class == "div-list" || $(e.target).parents(".div-list").size()) 
        {
        	 //This triggers if you click on them
        }
        else
        {     
        	 //This triggers if you click outside of them
           $(".container").css({"background-color": "rgba(0,0,0,0)"});
           $('.section2').removeClass('section2');
        }
  });
  
});