JSFiddle - React, Tailwind, and code Playground

by Kirubel Girma

HTML

<div class="emailcont">
  <img src="http://dev.hireklever.com/static/media/klever-logo.4addeb12.png" alt="" class="logo">
  <div class="emailbod">
    Hi {Freelancer name},<br><br>
    You have a new project proposal that you need to take a look at and either accept or decline.
    <br>
    <br>
    <br>
    You can see your new project proposal link <a href="here">HERE</a>.
    <br>
    <br>
    Remember, you have a 24hr response time limit but the quicker you get back to your client the higher chance you have of working with them! <br>
    <br>
  </div>
      <div class="cansp">
      <div>3423 Pidemont RD NE, Atlanta, GA</div>
      <div>© Klever, All rights reserved</div>
    </div>

</div>

CSS

body {
  background: white;
  font-family: arial;
  position: absolute;
  height: 100%;
  width: 80%;
  padding: 0em 3em;
}

.logo {
  height: 2em;
  margin: 0 auto;
  display: block;
  margin-top: 2em;
}

.emailbod {
  width: 100%;
  max-width: 32em;
  min-height: 14em;
  box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.4);
  margin: 3em auto;
  border-radius: .3em;
  padding: 1em;
}

.cansp {
  text-align: center;
  max-width: 32em;
  width: 20em;
  font-size: .7em;
  opacity: .4;
  margin: 6em auto;
  
}