JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="block">
		<div class="container calculator">
			<h2>Конструктор багета онлайн</h2>
			<div class="col-md-6 result">
				<div class="row">
					<div class="rama" id="rama">
						<div id="img" style="background-color: #999;">
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6 calc">
					<div class="col-md-12">
						<div class="row">
							<h3>Параметры багета</h3>
					<div class="col-md-6">
						<div class="row">
							<label>Ширина (мм)</label><br>
						<input type="number" id="w" value="500" placeholder="Введите ширину.."><br>
						</div>
					</div>
					<div class="col-md-6">
						<div class="row">
							<label>Высота (мм) </label><br>
							<input type="number" id="h" value="500" placeholder="Введите высоту.."><br>
						</div>
					</div>
						</div>
					</div>
					<h3>Паспарту</h3>
					<div class="col-md-12">
						<div class="row">
							<div class="col-md-6">
						<div class="row">
							<label>Паспарту (мм) </label><br>
							<input type="number" id="p" value="25" placeholder="Введите ширину.."><br>
						</div>
					</div>
					<div class="col-md-6">
						<div class="row">
							<label>Паспарту (цвет) </label><br>
							<input type="color" id="c" value="#FFA07A"><br>
						</div>
					</div>
						</div>
					</div>

					<div class="col-md-12">
						<div class="row">
							<h3>Изображение на багете</h3>
					<label>Изображение </label><br>
					<input type="file" id="files" name="files[]" multiple />
						</div>
					</div>
					<div...

CSS

.calculator {
		padding: 50px 0;
	}
	.result {
		padding: 20px;
	}

	.rama {
		width: 100%;
		height: 500px;
		transition: 0.3s;
		background-color: #FFA07A;
		border: 30px solid #40c4c8;
    	border-image: url(../images/baget.jpg) 50 round round;
  }
	
	#img {
		
		background-size: cover;
    	background-position: center; 
	}
	.price {
		font-size: 30px;
		font-weight: 900;
		padding-left: 10px;
	}
	.calc .col-md-12 {
		padding-bottom: 15px;
	}

JavaScript

$(document).ready(function() {
	function baget() {
		$price_baget = 600; // Цена за багет
		$price_paspartu = 200; // Цена за паспарту
		$w = Number($('#w').val()); // Ширина багета в ММ
		$h = Number($('#h').val()); // Высота багета в ММ
		$p = Number($('#p').val()); // Ширина паспарту в ММ
		$c = $('#c').val(); // Цвет паспарту
		$border_w = 25; // Ширини рамки
		// Проверка на отрицательные числа
		if ($w < 0) {
			$('#w').val(0)
			$w = 0;
		}
		if ($h < 0) {
			$('#h').val(0)
			$h = 0;
		}
		if ($p < 0) {
			$('#p').val(0)
			$p = 0;
		}
		// Конец проверки на отричательные числа
		$k = $h / $w; // Коф.
		$width = Number($('.rama').width()); // Ширина на сайте 
		$height = Number($('.rama').height()); // Высота на сайте
		$border = $border_w * ($width / $w); // Ширина рамки в маштабе 
		$p = $p * ($width / $w); // Ширина паспарту
		$perimetr = 2 * ($w + $h) / 1000; // Периметр в метрах
		$ploshchad = ($w * $h) / 1000000;
		$price = $perimetr * $price_baget;
		if ($p > 0) {
			$price += $price_paspartu * $ploshchad;
		}
		$('.price').html($price);
		$('#img').css("width", $width - ($p * 2) + 'px');
		$('#img').css("height", $height - ($p * 2) + 'px');
		$('#img').css("margin", $p + 'px');
		$('.rama').height($width * $k);
		$('.rama').css("border", $border + "px solid #40c4c8");
		$('.rama').css("border-image", "url(https://www.perfekte-bilderrahmen.de/rahmenvorschau.php?laenge=18.0&breite=13.0&farbe=23) 50 round round");
		$('.rama').css("background-color", $c);
	}
	$('.calc').change(baget());
});

function handleFileSelect(evt) {
	var files = evt.target.files; // FileList object
	// Loop through the FileList and render image files as thumbnails.
	for (var i = 0, f; f = files[i]; i++) {
		// Only process image files.
		if (!f.type.match('image.*')) {
			continue;
		}
		var reader = new FileReader();
		// Closure to capture the file information.
		reader.onload = (function(theFile) {
			return function(e) {
				// Render...