JSFiddle - React, Tailwind, and code Playground

by bryiantan

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
    
    <!--vertical align on parent using my-auto-->
    <div class="row head">
        <div class="col-sm-4 remove-padding my-auto">
            <img src="https://images.freeimages.com/images/large-previews/efb/lotus-flower-1382251.jpg" id="face" alt="">
        </div>
        <div class="col-sm-8 my-auto text-center">
           <h1 class="head">First Last</h1>
      <h2 class="head" >A C# software developer</h2>
        </div>
    </div>
</div>

CSS

html, body {
    height: 100%;
}

.container {
    height: 100%;
    width: 100%;
}

img#face {
  width: 250px;
  height: 250px;
}
/* show border around full height container */
.head {
    background: rgba(187, 200, 133, 1);
    margin-left: auto;
  margin-right: auto;
}
div.head h1{
  font-family: Raleway;
  color: #FFF;
  font-size: 40px;
  overflow: hidden;
  font-weight: lighter;
}

div.head h2 {
  color: #FFF;
  margin-top: 0px;
  font-family: Raleway;
  font-size: 30px;
  font-weight: lighter;
}

.remove-padding{
padding: 0px !important;
}