JSFiddle - React, Tailwind, and code Playground

by Tintu Raju

HTML

<header>
    <h1>Coffee</h1>
</header>

<section id="content">


    <div id="pictureFrame">

        <img src="" id="img" />

    </div>
    <nav>

        <button id="button1" class="button"  onclick="pic1()">Starbucks</button>
        <br/>
        <br/>
        <button id="button2" class="button" onclick="pic2()">Muffin    Break</button>
        <br/>
        <br/>
        <button id="button3" class="button"   onclick="pic3()">Costa</button>
  </nav>
</section>



<footer>
    <h1>This is a footer</h1>
</footer>

CSS

body {
        margin: 0;
        background-color: mediumpurple;
    }
    header {
        margin: auto;
        width: 90%;
        background-color: orangered;
        height: 50px;
        text-align: center;
    }
    #content {
        width: 80%;
        background-color: green;
        margin: auto;
    }
    nav {
        float: left;
        background-color: greenyellow;
        width: 30%;
        height: 750px;
        text-align: center;
    }
    #pictureFrame {
        float: left;
        width: 70%;
        height: 750px;
        background-color: deeppink;
    }
    footer {
        margin: auto;
        width: 90%;
        background-color: orangered;
        height: 50px;
        text-align: center;
        clear: both;
    }
    .button {
        margin-top: 100px;
        background-color: white;
        border-radius: 20px;
        width: 70%;
        height: 75px;
    }
    #img {
        margin-top: 19%;
        margin-left: 35%;
        width: 300px;
        height: 300px;
    }

JavaScript

function reset(){

			    document.getElementById("button1").style.background='white';
		        document.getElementById("button2").style.background='white';
		        document.getElementById("button3").style.background='white';
		}

	    function pic1() {
	        document.getElementById("img").src = "images/starbucks.png";
	        reset();
	        document.getElementById("button1").style.background='red';



	    }

	    function pic2() {
	        document.getElementById("img").src = "images/muffin.png";
	        reset();
	        document.getElementById("button2").style.background='red';
	    }

	    function pic3() {
	        document.getElementById("img").src = "images/costa.png";
	        reset();
	        document.getElementById("button3").style.background='red';
	    }