JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<h1><pre>Title Title</pre></h1>
<p>text text</p>
<div id="Scotty">
<img src="http://img4.wikia.nocookie.net/__cb20130401003336/starwars/images/b/b5/Scotty1.jpg" alt="Scotty" width=300 height=300/>
</div>
<div id="Uhura">
<img src="http://startrekmilano.altervista.org/schede-tos/images/uhura.jpg" alt="Uhura" width=300 height=300/>
</div>
<div id="Sulu">
<img src="http://img4.wikia.nocookie.net/__cb20110417163244/memoryalpha/en/images/7/7c/Sulu2266.jpg" alt="Sulu" width=300 height=300/>
</div>
<script>
var choice;
do{
choice = window.prompt("Which of these Star Trek members wil you like to see?Enter S for Scotty, U for Uhura, or L for Sulu");
choice = choice.toUpperCase();
} while (choice != 'S' && choice != 'U' && choice !='L');
var member;
if(choice == 'S'){
document.getElementById("Scotty").style.display='block';
}else if(choice == "U"){
member = "Uhura";
document.getElementById("Uhura").style.display='block';
}else{
member= "Sulu";
document.getElementById("Sulu").style.display='block';
}
</script>
</html>
CSS
body{background-image:url(http://www.desktopaper.com/wp-content/uploads/simple-stars-background-by-fantmayo-dibs.jpg)
}
h1{
margin-bottom:0;
background-color:white;
height:40px;
width:200px;
}
p{
background-color:#200000;
color:white;
height:250px;
width:900px;
float:left;
}
#Uhura,#Sulu,#Scotty{
position:relative;
background-color:#6E6E6E;
height:200px;
width:300px;
margin-left:900px;
display:none;
}