JSFiddle - React, Tailwind, and code Playground

by msfrisbie

HTML

<link href="https://fonts.googleapis.com/css?family=Antic|Josefin+Sans|Julius+Sans+One|Khand|Questrial|Ubuntu" rel="stylesheet">

<style>

  html, body {
    margin: 0;
    background-color: pink;
  }

body {
  font-family: 'Questrial', sans-serif;
  padding: 0;
  margin: 0;
  font-size: 18px;
}

div#card {
  
  background-color: #2774AE;
  height: 1143px;
  width: 2000px;
}

div#text {
  position: absolute;
  /* bottom: 11em; */
  bottom: 12em;
  left: 12em;
  color: #edda0e;
}

div#logobox {
  position: absolute;
  top: 12em;
  right: 12em;
}

#logobox svg {
  height: 170px;
}

svg {
  height: 320px;
}

g {
  fill: white;
}

</style>

<div id="card">
<!--
<div style="position:absolute;background-color:rgba(0,0,0,0.1);top:0;left:0;width:30px;height:50%;">

</div>
-->
<div id="text">
  <div style="font-size: 6.4em; font-weight:Medium; color:#FFD100">
  Scott Robinson
  </div>
  <div style="font-size: 4em; font-weight:Regular; color:white">
  CEO
  </div>
  <div style="height:1.5em">
  
  </div>
  <div style="font-size: 2.5em; font-weight:Light; margin-top:0.7em; color:white">
  [email protected]
  </div>
  <div style="font-size: 2.5em; font-weight:Light; margin-top:0.37em; color:white">
  650-380-6126
  </div>
  <div style="font-size: 2.5em; font-weight:Light; margin-top:0.3em; color:white">
  www.gosellout.com
  </div>
</div>

<div id="logobox">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-2 -2 334 80"><g id="logo" transform="matrix(0.7,0,0,0.7,0,0)"><path xmlns="http://www.w3.org/2000/svg" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0z M55.8,65.3L44,77c-3.2,3.2-7.5,5-11.8,5h0  c-3.9,0-7.5-1.5-10.2-4.1c-5.8-5.8-5.8-15.3,0-21.1l14.1-14.1L36,44.9c-0.2,2.6,0.1,5.1,0.9,7.4l0.2,0.5l-9.5,9.5  c-1.4,1.4-2.1,3.2-2.1,5.1c0,1.9,0.7,3.7,2.1,5.1c1.2,1.2,2.9,1.9,4.7,1.9c2.3,0,4.6-1,6.3-2.7l11.7-11.7c3.3-3.3,3.7-8.2,0.9-11 ...