JSFiddle - React, Tailwind, and code Playground

by mkurzweil

HTML

<!DOCTYPE html>
<html>
<head>
	<title>University of Calgary Scholarship</title>
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="selectionPage.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

</head>
<body>
	<div class = "container">
		<div class="d-flex justify-content-center h-100">
			<div class = "card">
				<div class ="card-header">
					<h3>Hello</h3>
				</div>

			</div>
		</div>
	</div>

</body>
</html>

CSS

html, body {
  height: 100%;
}

body{
	background-image: url(https://www.ucalgary.ca/mediacentre/files/mediacentre/aerials_011a7179_fe.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	height: 100%;
	font-family: 'Numans', sans-serif;
}
.container{
	height: 100%;
	align-content: center;
}
.card{
  
	height: 350; /* include top margin gap! */
	margin: 10% 15% 0 15%; /* center container */
	width: 450px;
	background-color: rgba(0,0,0,0.5);
}
.card-header h3{
	color: white;
	text-align: center;
}


@media only screen and (max-width: 770px) {
 .card {
  margin: 0;
 }
}