JSFiddle - React, Tailwind, and code Playground

by Zer00ne Null

HTML

<script src="https://fonts.googleapis.com/css?family=Raleway:600"></script>
<main class="wrap">
  <section class="s-inner">
    <figure>
      <figcaption class="title">
        <h1>
   HC American School for the Deaf
    </h1>
      </figcaption>
    </figure>
  </section>
</main>

CSS

/* Core~~~~~~~~~~~~~~~*/

html {
  box-sizing: border-box;
  font: 500 16px/1.428 'Raleway';
  height: 100vh;
  width: 100vw;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  font-size: 1rem;
  line-height: 1;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap {
  display: table;
  max-width: 500px;
  max-height: 200px;
  background: orange;
}

.s-inner {
  display: table-cell;
  width: 100%;
}

.s-inner > figure {
  width: 100vw;
  height: 100vh;
  background-image: url(http://www.trbimg.com/img-4fad2af0/turbine/hc-american-school-for-the-deaf-20120510-006);
  background-repeat: no-repeat;
  background-size: contain;
}

figure:before {
  content: '🎓';
  font-size: 3em;
}

.title {
  font-variant: small-caps;
  color: black;
  margin: 10px 30px 0 35%;
  float: right;
}