JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Display Images</title>
    <style>
        body {
            margin: 0;
            padding: 0;
			height: 100vh;
		}
        
        img {
            display: block;
			box-sizing: border-box;
            width: 100%;
            height: auto;
        }

		.image-input-container {
			position: relative;
			top: 0;
			left: 0;
			right: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 100%;
			background-color: #fff;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			z-index: 9999;
			transition: top 0.3s ease;
		}
		
		.image-input-container.hidden {
			top: -60px;
		}
		
		.image-input-container.success {
			height:60px;
		}
		
		.image-input {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 90%;
			max-width: 600px;
			height: 100%;
			border: none;
			outline: none;
			background-color: transparent;
			cursor: pointer;
			overflow: hidden;
			position: relative;
		}
		
		.image-input input[type="file"] {
			position: relative;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			cursor: pointer;
			z-index: 1;
		}
		
		.image-input::before {
			content: "Drag and drop files here";
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 18px;
			color: #555;
			z-index: 0;
			pointer-events: none;
			transition: opacity 0.3s ease;
		}
		
		.image-input:hover::before {
			opacity: 0.5;
		}
		
		.image-input.success {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 60px;
			background-color: #2ecc71;
			color: #fff;
			font-weight: bold;
			text-align: center;
			padding: 16px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			z-index: 9999;
			transition: top 0.3s ease;
		}
		
		.image-input.success.hidden {
			top: -60px;
		}
		
		.range-container {
		position:...