JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div class="bg" id="newhr-smm">
  <div class="content">

    <div class="newhr-logo">
      <div class="r">
        <div class="r1"></div>
        <div class="r2"></div>
      </div>
      <div class="text">NEW.HR</div>
    </div>

    <div class="title">нам нужен</div>
    <h2>ведущий</h2>
    <h1>React Native</h1>
    <h3>разработчик</h3>

    <div class="info">
      Лосанжелес, удаленка <br><br>
      Подробности 
      <span>https://new.hr/v/1</span>
    </div>

    <div class="mailto">
      <span>mailto:</span>
      [email protected]
    </div>
  </div>
</div>

CSS

:root {
  --color1: #00e66b;
  --color2: #00c760;
  --size: 45px;
  --height: calc(var(--size)*2);
}

.newhr-logo {
  zoom: .5;
  height: 130px;
  width: 250px;
  position: relative;
  top: 50px;
  left: 100px;
}

.newhr-logo .text {
  position: relative;
  top: -130px;
  font-size: 32px;
  color: #fff;
  margin: 0;
  margin-left: 110px;
  font-family: Arial;
  font-weight: bold;
}

.newhr-logo .r {
  margin: 0;
  margin-left: 30px;
}

.newhr-logo .r1,
.newhr-logo .r2
{
  border-bottom-left-radius: var(--size);
  border-top-left-radius: var(--size);
  width: var(--size);
  height: var(--height);
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
}

.newhr-logo .r1 {
  background: var(--color1);
  top: 0;
  transform: rotate(70deg);
  z-index: 9999;
}

.newhr-logo .r2 {
  background: var(--color2);
  top: -48px;
  transform: rotate(-70deg);
}

.bg {
/*
   background-image: url(http://s32.iamwire.com.s3.amazonaws.com/wp-content/uploads/2015/06/startup-accelerator.jpg);
   background-size: contain;
*/
/*
   background-image: url(https://inc42.com/wp-content/uploads/2015/01/startup-incubator.jpg);
   background-size: cover;
*/
   background-image: url(https://s3-eu-west-1.amazonaws.com/userlike-cdn-blog/startup-deal/startup-rocket.jpg);
  background-size: cover;

   background-repeat: repeat;
   width: 600px;
   height: 400px;
}

.content {
   background: #1a1f1e;
   height: 400px;
   color: #fff;
   font-family: Arial;
   text-align: center;
   opacity: .7;
}

.title {
  margin-top: 10px;
  color: #ccc;
}

.info {
  font-size: .8em;
  margin-top: 20px;
  color: #ccc;
}

.mailto {
  font-size: .9em;
  margin-top: 20px;
}

.mailto span {
  color: #ccc;
}

h1 {
  color: #42aaff;
}

JavaScript

console.clear();

//setTimeout(render, 2000);

function render() {
  html2canvas(document.getElementById("newhr-smm"), {
    onrendered: function (canvas) {
      document.body.appendChild(canvas);
      document.getElementById("newhr-smm").style.display = 'none';
    },
    width:600,
    height:400
  });
}