JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo-med.png?v=6f86a5fa447f">
</div>
</div>
</div>
<div class="container" id="student">
<div class="row">
<div class="col-sm-4">
<h1>Student</h1>
</div>
<div class="col-sm-offset-2 col-sm-6" id="date">
<form class="form-inline">
<div class="form-group">
<label for="focusedInput"> <b>Date:</b></label>
<input class="form-control" id="focusedInput" type="text" placeholder="DD Month Year">
</div>
</form>
</div>
</div>
</div>
CSS
@media print{
@font-face {
font-family: "myfont";
src: url("../fonts/opensans/OpenSans-Regular 2.ttf");
}
body{
font-family: "myfont";
color: #111111;
}
img{
width: 150px;
}
#student{
margin-top: 50px;
}
#date{
background: black;
margin-top: 20px;
color: white;
padding: 10px;
}
}