Responsive Tailwind React Design

Modify this design a lot without breaking anything @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap'); * { margin: 0; padding: 0; font family: 'Poppins', sans serif; } html, body { margin: 0; height: 100%; overflow: hidden; } @keyframes liftup { from { bottom: 1000px; } to { bottom: 65px; } } @keyframes liftdown { from { margin top: 50vh; } to { margin top: 30vh; } } .menu { display: block; width: 300px; height: 95px; min height: 450px; position: absolute; margin top: 435px; z index: 3000; bottom: 100px; right: 35px; text align: center; background: linear gradient(130.7deg, #000000 0.58%, rgba(0, 0, 0, 0.39) 65.77%); opacity:0.9; background size: cover; border radius: 15px; animation: liftup 300ms ease in out; animation iteration count: 1; } .menu_description{ display: block; position: absolute; border radius: 10px; font weight: bold; padding: 6px; max width: 600px; text transform: uppercase; text align: left; font size: 12px; border: 1px solid rgb(0, 0, 0); color: white; box shadow: inset 0px 0px 3px 3px rgba(0,0,0,0.35); background color: rgba(0,0,0,0.5); font family: 'Arial', sans serif; webkit transform: translate( 100%, 0); margin top: 0.20%; margin left: 16%; } .menu h1 { background color: rgba(20, 20, 20, 0); color: white; text transform: uppercase; text align: center; border bottom:2px solid rgba(255, 255, 255, 0.418); font size: 16px; font weight: bold; padding: 6px; margin bottom:10px; } .choices { overflow y: scroll; overflow x: hidden; max height: 450px !important; margin:auto; webkit border bottom right radius: 10px; webkit border bottom left radius: 10px; moz border radius bottomright: 10px; moz border radius bottomleft: 10px; border bottom right radius: 10px; border bottom left radius: 10px; } .choices:: webkit scrollbar { display: none; } .choices>div { border radius: 5px; width: 84.5%; margin:auto; margin top: 0.8vh; height: 9%; text transform: uppercase; display: flex; justify content: center; align items: center; font size: 12px; color: white; font weight: bold; cursor: pointer; background: linear gradient(90deg, rgba(39, 39, 39, 0.137) 0.22%, rgba(75, 75, 75, 0.59) 98.97%); border: 1.5px solid rgba(255, 255, 255, 0.205); font weight: bold; cursor: pointer; transition: 0.25s; } .choices .selected { background: rgba(19, 19, 19, 0.63); border color: #ffffff; color: #ffffff; width: 92.5%; transition: 0.25s; } /* wprompt */ .wprompt{ background color: rgba(0,0,0,0.5); border: 1px solid rgb(0, 0, 0); font family: 'Arial', sans serif; box shadow: 1px 1px 18px 1px #000000; color: white; width: 300px; height: 200px; border radius: 5px; display: flex; padding: 5px; flex direction: column; cursor: pointer; } .wprompt h1{ font size: 12px; font family: 'Arial', sans serif; } .wprompt textarea{ outline: none !important; background color: rgba(0,0,0,0.5); border: 1px solid rgb(0, 0, 0); box shadow: inset 1px 1px 18px 1px #000000; border radius: 5px; flex: 1; color: white; width: 100%; padding: 5px; resize: none; box sizing: border box; } .wprompt textarea:focus{ outline: none !important; } .wprompt .help{ font size: 12px; font family: 'Arial', sans serif; padding: 3px; text transform: uppercase; } .request_manager { position: absolute; bottom: 30px; right: 10px; text align: right; } .request_manager div { margin top: 10px; } .request_manager div>span { font size: 1.2em; color: white; font weight: bold; background color: rgba(0, 0, 0, 0.50); padding: 4px; } .request_manager .yes { padding left: 15px; color: rgb(0, 255, 0); font size: 1em; } .request_manager .no { color: rgb(255, 0, 0); font size: 1em; } .announce { position: absolute; bottom: 0; left: 50%; width: 780px; height: 130px; padding: 10px; margin left: 400px; font weight: bold; font size: 1.1em; text shadow: 2px 2px black; color: white; display: none; opacity: 0.90; } #voice_indicator { position: absolute; width: 75px; height: 75px; right: 0; top: 35%; background image: url("images/voice_active.png"); display: none; } #voice_indicator.active { display: block; } .radio_display { position: absolute; right: 0; top: 15%; margin: 6px; width: 200px; } .radio_display>div { overflow: hidden; margin top: 3px; font weight: bold; border radius: 8px; padding: 5px; color: white; background image: linear gradient(to bottom, rgba(50, 50, 50, 0.75), rgba(0, 0, 0, 0.75)); } .radio_display>div>.group { text decoration: underline; } .radio_display>div>.title {} .welcome screen { position: absolute; top: 0; left: 0; background: linear gradient(150deg, rgb(0, 0, 0), rgba(71, 66, 66, 0.788)); width: 100%; color: white; height: 100%; font family: "Akrobat Extrabold"; letter spacing: .5vh; display: flex; user select: none; justify content: center; align items: center; flex direction: column; } .welcome screen > img { width: 10vw; } @keyframes welcome fade { from { opacity: 0; } to { opacity: 1; } } .welcome screen > .welcome { margin top: .78vw; font size: 1.2vw; letter spacing: 5px; font family: "Akrobat bold"; } .welcome screen > .welcome > span { opacity: 0; transition: 1s; } .welcome screen > .name { font size: 2vw; } .welcome screen > .name > span { opacity: 0; transition: 1s; }