JSFiddle - React, Tailwind, and code Playground

HTML

@{
    ViewBag.Title = "TeamX";
    ViewBag.Description = "Home Page";
}

<html>
<head><script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
</head>
<body>
<div class="row">
    <div class="col-xs-12 col-md-5">
        <div class="box box-default">
            <div class="box-header">
                <h3 class="box-title">Image Here</h3>
            </div>
            <div class="box-body">
				<img src="//placehold.it/400x300&text=BIG-IMG-1" title="Main Image" alt="Main Image" id="image" />            </div>
        </div>
    </div>
    <div class="col-xs-12 col-md-7">
        <div class="box box-default">
            <div class="box-header with-border">
                <h3 class="box-title">JSON Response</h3>
            </div>
            <div class="box-body">
                <p id="response"/>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12 col-md-6">
        <div class="box box-danger">
            <div class="box-header">
                <h3 class="box-title">Pic Toggle</h3>
            </div>
            <div class="box-body">
				<button id="close-image"><img class="image1" src="C:\Users\Gita\source\repos\TeamX\TeamxMVC\TeamX\TeamX\Content\img\peeping_gecko.gif" id="gimm2e" onclick="changeImage()" /></button>
				<button id="close-image"><img class="image1" src="https://www.geico.com/public/images/peeping_gecko.gif" id="gi2mme" onclick="changeImage(this.src)" /></button>	
			</div>
        </div>
    </div>
</div>
	<style>
		button {
		display: inline-block;
		height: 134px;
		padding: 0;
		margin: 0;
		vertical-align: top;
		width: 104px;
		}

		#close-image img {
		display: block;
		height: 130px;  
		width: 100px;
		}
	</style>




	</body>
</html>
<script>

$(document).ready(function () {

function changeImage(e) {
		document.getElementById('image').src = e;
	}})
</script>