JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<div class="grid-container">
<img src="http://www.placepuppy.net/3p/1600/1200" id="puppy" />
<div class="content">
<h1>Some Headline of Sorts or Anything Really</h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem. Eaque ipsa quae ab illo inventore veritatis et quasi. Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
<p>Laboris nisi ut aliquip ex ea commodo consequat. Do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</p>
<p><strong>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat.</strong> <em> Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque.</em> Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>

CSS

body {
  margin: 0;
  font-family: 'Avenir Next', san-serif;
}

h1 {
  font-family: 'Times New Roman', serif;
}

.grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr 3fr;
  grid-template-rows: 1fr 150px 1fr;
  grid-template-areas: ". . content" "puppy puppy content" ". . content";
  grid-gap: 20px;
  overflow: hidden;
  min-height: 100vh;
}

#puppy {
  max-width: 100%;
  grid-area: puppy;
  transform: scale(2) translate(-12.5%, -12.5%);
 }
 
 .content {
   grid-area: content;
   background: #141414;
   padding: 5rem;
   color: #FFF;
   position: relative;
   z-index: 1;
 }