JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="stage">
		<div class="header">
			<input id="new-image" placeholder="Enter image URL">
			<input id="new-video" placeholder="Enter video URL">
		</div>
		<div class="positioning" style="-webkit-transform: rotateY(-39.93700787401575deg) rotateX(-12.628797886393663deg);">
			<div class="iphone">
				<figure class="front">
					<div class="screen">
						<img src="">
						<video class="video" id="video" mute="0" loop="" autoplay="">
              <source src="http://nest_img.s3.amazonaws.com/videos/home-iphone-tour-v4.mp4">
						</video>
						<div class="glare" style="-webkit-transform: translateX(-299px) translateY(198px) rotateZ(45deg);"></div>
					</div>
				</figure>
				 <figure class="back"></figure>
         <figure class="left"></figure>
         <figure class="right"></figure>
         <figure class="left"></figure>
         <figure class="top"></figure>
         <figure class="bottom"></figure>
			</div>
		</div>
	</div>
	
<div id="annotary-scripts-loaded" style="display:none;"></div><div id="window-resizer-tooltip" style="display: none;"><a href="#" title="Edit settings" style="background-image: url(chrome-extension://kkelicaakdanhinjdeammmilcgefonfh/images/icon_19.png);"></a><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth">1440</span> x <span class="tooltipHeight" id="winHeight">829</span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth">818</span> x <span class="tooltipHeight" id="vpHeight">757</span></div>

CSS

/*VARIALBES*/
.clearfix {
  *zoom: 1; }
  .clearfix:before, .clearfix:after {
    content: "";
    display: table;
    line-height: 0; }
  .clearfix:after {
    clear: both; }

.hidden {
  left: -999em;
  position: absolute;
  top: -999em; }

.visible {
  left: 0;
  position: static;
  top: 0; }

.hide-text:not(p) {
  background-color: transparent;
  border: 0;
  color: transparent;
  display: block;
  font: 0/0 a;
  text-shadow: none; }

.inline-block {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: top;
  zoom: 1;
  *display: inline; }

.main {
  width: 100%;
  max-width: 690px;
  margin-left: auto;
  margin-right: auto;
  /*	position: relative;*/ }

.unstyle-list {
  list-style: none;
  padding: 0;
  margin: 0; }

.button-styling {
  padding: 14px 30px;
  font-size: 14px;
  text-align: center;
  border: none;
  outline: none;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -webkit-appearance: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: background-color 0.25s ease;
  -moz-transition: background-color 0.25s ease;
  -ms-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease; }

.threedee-translate {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.header-gradient {
  background: #ffffff;
  /* Old browsers */
  background: -moz-linear-gradient(top, white 49%, #f0f4ed 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(49%, white), color-stop(100%, #f0f4ed));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, white 49%, #f0f4ed 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, white 49%, #f0f4ed 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top,...

JavaScript

$(document).ready(function(){
	
	$(".stage").on("mousemove", function(e){
		xPos = e.pageX;
		yPos = e.pageY;
		stageWidth = $(".stage").width();
		stageHeight = $(".stage").height();
		
		glareX = (stageWidth - xPos) - 300;
		glareY = (stageHeight - yPos) - 300;
		softxPos = -[(xPos/stageWidth * 80) + -40];
		softyPos = [(yPos/stageHeight * 80) + -40];
				
		$(".positioning").css("-webkit-transform", "rotateY("+softxPos+"deg) rotateX("+softyPos+"deg)");
		$(".glare").css("-webkit-transform", "translateX("+glareX+"px) translateY("+glareY+"px) rotateZ(45deg)");
	});
	
	$("#new-image").on("keypress", function(e){
		if(e.keyCode == 13){
			newImage = $(this).val();
			$(".screen img").attr("src", newImage);
			$(this).val("");
		}
	});
	
	$("#new-video").on("keypress", function(e){
		if(e.keyCode == 13){
			newVideo = $(this).val();
			$('#source').remove();
			var video = document.getElementById('video');
			var source = document.createElement('source');
			source.setAttribute('src', ''+newVideo+'');
			source.id = "source";
			video.appendChild(source);
			video.play();
			$(this).val("");
		}
	});
	
});