JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wt-col-9 wt-col-xlg-8 wt-col-lg-7 position-relative">
<img data-src="https://www.jetbrains.com/img/home-page/header-bg-2019.png" has-retina="" class="home-page-header__image" alt="" width="1300" src="/img/home-page/header-bg-2019.png">
<canvas id="js-animation"></canvas>
</div>
CSS
.overflow-hidden {
overflow: hidden
}
.home-page__section-content._padding-top {
padding-top: 90px
}
.home-page__section-content._appreciated {
padding-top: 150px
}
.home-page__section-content p {
font-size: 16px
}
.home-page-header {
padding-top: 150px;
padding-bottom: 215px
}
#js-animation,.home-page-header__image {
position: absolute;
top: -250px;
left: -350px;
opacity: 0;
-webkit-transition: opacity .5s ease-in;
transition: opacity .5s ease-in
}
.home-page-header__image {
opacity: 1
}
#js-animation canvas {
background: transparent!important
}
.home-page-header__pre-text {
font-size: 22px;
margin-bottom: 20px;
color: #afb1b3
}
.home-page__h1 {
font-size: 80px;
font-weight: 700;
line-height: 80px;
letter-spacing: -2px;
margin-bottom: 50px;
color: #161616
}
.home-page__h1._small {
font-size: 70px;
line-height: 70px
}
.home-page__h1._color-light {
color: #fff
}
.home-page__h2 {
font-size: 36px;
font-weight: 700;
line-height: 40px;
margin-top: 0;
margin-bottom: 50px
}
.home-page__h2._color-light {
color: #fff
}
.home-page__h3 {
font-size: 22px;
font-weight: 700;
line-height: 25px;
margin-top: 30px;
margin-bottom: 35px
}
.home-page__h3._color-light {
color: #fff
}
.home-page__h4 {
font-size: 18px;
font-weight: 700;
line-height: 20px;
margin-top: 11px;
margin-bottom: 15px;
color: #161616
}
.home-page__h4._color-light {
color: #fff
}
.home-page-header__top-products {
line-height: 22px;
margin-top: 200px;
color: #afb1b3
}
.home-page-header__top-products>a {
display: block;
text-decoration: none;
color: #afb1b3
}
.home-page-products {
padding-top: 140px
}
.new-release-box {
height: 280px;
margin-top: -280px;
margin-bottom: 100px
}
.product-card {
font-size: 15px;
line-height: 25px;
-ms-flex-line-pack: center;
...
JavaScript
(window.webpackJsonp = window.webpackJsonp || []).push([[199], {
198: function(t, e, n) {
n("ctTR"),
t.exports = n("MDA3")
},
"2vox": function(t, e, n) {
n("dIDI"),
n("ao60")
},
"3HP4": function(t, e, n) {
n("O6Ep"),
n("5wxQ"),
n("2vox"),
n("jJjE"),
n("IwPY"),
n("BMhk"),
n("I5Ro"),
n("QD35"),
n("M7bh"),
n("/oAO")
},
"5wxQ": function(t, e, n) {
n("EhF+"),
n("OhLv")
},
"7DDg": function(t, e, n) {
"use strict";
if (n("nh4g")) {
var r = n("LQAc")
, o = n("dyZX")
, a = n("eeVq")
, i = n("XKFU")
, c = n("D4iV")
, l = n("7Qtz")
, s = n("m0Pp")
, u = n("9gX7")
, d = n("RjD/")
, f = n("Mukb")
, h = n("3Lyj")
, p = n("RYi7")
, g = n("ne8i")
, m = n("Cfrj")
, v = n("d/Gc")
, y = n("apmT")
, x = n("aagx")
, M = n("I8a+")
, w = n("0/R4")
, I = n("S/j/")
, b = n("M6Qj")
, E = n("Kuth")
, A = n("OP3Y")
, _ = n("kJMx").f
, R = n("J+6e")
, T = n("ylqs")
, S = n("K0xU")
, L = n("CkkT")
, D = n("w2a5")
, C = n("69bn")
, P = n("yt8O")
, U = n("hPIQ")
, F = n("XMVh")
, B = n("elZq")
, O = n("Nr18")
, V = n("upKx")
, z = n("hswa")
, G = n("EemH")
, N = z.f
, W = G.f
, X = o.RangeError
, k = o.TypeError
, Y = o.Uint8Array
, j = Array.prototype
, H = l.ArrayBuffer
, Q =...