JSFiddle - React, Tailwind, and code Playground

by chrisfrisina

HTML

<head>
</head>
<body>
    <div> Click on one of the types to show the functionality </div> <br />
    <div id="centerArea">
        <div id="selectors">
        	<ul>
                <li id="one">Type 1</li>
                <li id="two">Type 2</li>
                <li id="three">Type 3</li>
            </ul>
        </div>
        <br/><br/>
        <div id="content">Content Prior to being clicked</div>
    </div>    
</body>

CSS

#selectors li{
	float: left;
	padding-right: 20px;
}
#content{
	clear: left;
}
#one {background:red}
#two {background:orange}
#three {background:yellow}

JavaScript

$("#one").click(function() {
	$('#content').text('Replaced with Content 1');
});

$("#two").click(function() {
	$('#content').text('Replaced with Content 2');
});

$("#three").click(function() {
	$('#content').text('Replaced with Content 3');
});