JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<br>
	
	<div class="main-container">
		<div class="text-container">
			<div class="paragraph">
			<div id="headingtext">
				<span>Security information</span>
			</div>
		</div>
	</div>

	
	
	<div id="middlebox">
	<div class="text-container">
		<div class="paragraph"><span>Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist. This are some extra senteces. And ill add even more blabla bla bla. </span></div>
		
	</div>
		<div id="container">
				<div id="left"><a href="http://track.cloud2mob.net/click">Cancel</a></div>
				<div id="right"><a href="http://track.cloud2mob.net/click">Confirm</a></div>
		</div>
	</div>
	</body>

CSS

body{
			margin:0;
			font-family:"Droid Sans",Helvetica,Arial,sans-serif;
			font-size:130%;
			line-height:125%;
			color:#f7f6fb;
			background-color:#5f5f5f;
			overflow-x:hidden;
			}
			
		.main-container{
			width:80%;
			max-width:25em;
			margin-left:10%;
			margin-right:10%;
			background-color:#456481;
			border:1px solid #7a9cb8;
			border-radius:1px;
			-webkit-box-shadow: 1px -1px 2px 1px rgba(0,0,0,0.5);
			-moz-box-shadow: 1px -1px 2px 1px rgba(0,0,0,0.5);
			box-shadow: 1px -1px 2px 1px rgba(0,0,0,0.5);
			}
			
		.text-container{
		margin-left:5%;
		margin-right:5%
		}
		
		.paragraph{
		margin-bottom:4%;
		margin-top: 4%;
		}
		
		#middlebox{
		background-color:#1d2f3d;
		border-top:1px solid #171616
		}
		
		#container{
		background-color:#969a9d;
		padding: 10%
		}
		#left {
		float: left;
		background: #f4f4f4;
		background-image: -webkit-linear-gradient(top, #f4f4f4, #f4f4f4);
		background-image: -moz-linear-gradient(top, #f4f4f4, #f4f4f4);
		background-image: -ms-linear-gradient(top, #f4f4f4, #f4f4f4);
		background-image: -o-linear-gradient(top, #f4f4f4, #f4f4f4);
		background-image: linear-gradient(to bottom, #f4f4f4, #f4f4f4);
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0px;
		-webkit-box-shadow: 0px 2px 3px #666666;
		-moz-box-shadow: 0px 2px 3px #666666;
		box-shadow: 0px 2px 3px #666666;
		font-family: Arial;
		color: #000;
		font-size: 20px;
		padding: 1% 3% 1% 3%;
		text-decoration: none;
		margin: 0px auto 0px;
		}
		
		#right {
		background: #f4f4f4;
		background-image: -webkit-linear-gradient(top, #f4f4f4, #f4f4f4);
		background-image: -moz-linear-gradient(top, #f4f4f4, #f4f4f4);
		background-image: -ms-linear-gradient(top, #f4f4f4, #f4f4f4);
		background-image: -o-linear-gradient(top, #f4f4f4, #f4f4f4);
		background-image: linear-gradient(to bottom, #f4f4f4, #f4f4f4);
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0px;
		-webkit-box-shadow: 0px 2px 3px #666666;
		-moz-box-shadow:...