JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-fluid" style="min-height: 105vh;">
        <div class="row">
            <div id="top" class="welcome-background">
                <div class="welcome">
                    <div class="welcome-final">
                        <div class="logo">
                            <img src="http://placehold.it/300x300" width="300px" height="300px" alt="">
                        </div>
                        <h1>ZIRBUSS! </h1>
                        <p class="text-xs-center">Gratis, azureus fugas foris acquirere de clemens, rusticus triticum.
                            barbatus, bassus agripetas unus captis de camerarius, fortis hibrida.
                            <br>Raptus, fatalis repressors diligenter locus de secundus, teres idoleum.</p>

                        <div id="countdown" class="countdownHolder">
                        </div>

                        <p id="note" class="text-xs-center"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <section class="first-section" id="first">
        <div class="container">
            <div class="row">
                <h1>Co to jest?</h1>
                <div class="offset-md-1 col-md-10">
                    <!--<img src="http://placehold.it/300x300" class="rounded float-xs-left">-->
                    <p>Victrix noceres, tanquam teres fides. Magnum, rusticus menss semper examinare de gratis, alter solem.
                        Cur bursa peregrinationes? Cum domina prarere, omnes eleateses imperium alter, altus rectores.
                        mirabilis, nobilis planetas mechanice examinare de rusticus, magnum zeta. ubi est festus quadra?
                        primus rumors ducunt ad fides. bi-color, flavum spatiis vix locus de peritus, alter onus.
                        cum triticum trabem, omnes specieses visum altus, raptus aonideses.
                        clemens navis aegre gratias mens est.</p>
                </div>
         ...

CSS

body {
  font-family: 'Lato', sans-serif;
  background-color: black;
  color: white;
}

.list-group-item {
  background-color: black;
  border-right: 0;
  border-left: 0;
}

h1 {
  font-size: 7vh;
  font-weight: 100;
  text-align: center;
}

h2 {
  font-size: 3rem;
  font-weight: 100;
  margin-top: 10vh;
}

p,li{
  font-size: 1.25rem;
  font-weight: 300;
  text-align: justify;
  hyphens: auto;
}

.lead {
  font-size: 2rem;
}

section {
  padding-top: 6vh;
  padding-bottom: 6vh;
}

.first-section {
  padding-top: 15vh;
}

a.feature {
  text-decoration: none;
  background-color: #001f3f;
}

.no-href {
  text-decoration:none;
  color: darkgrey;
  font-size: 1.5rem;
  font-family: 'Lato', sans-serif;
}

.no-href:hover {
  text-decoration: none;
  color: gray;
}

.welcome-background {
  width: 100%;
  min-height: 105vh;
  text-align: center;
  color: lightgray;
  background-image: url(http://placehold.it/1000x1000);
  background-position: center top;
  background-size: 100% 100%;
}

img {
  max-width: 100%;
}

.bg-layer{
  background-size: cover;
  height: 40vh;
  width: 100%;
  text-align: center;
}

.bg-layer:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
}

.welcome-final {
  width: 100%;
  min-height: 105vh;
  padding-top: 20vh;
}

.welcome {
  background: rgba(0,0,0,0.85);
  min-height: 105vh;

}

.background-1 {
  background: url(http://placehold.it/1000x1000) no-repeat top center fixed;
}
.background-2 {
  background: url(http://placehold.it/1000x1000) no-repeat top center fixed;
}
.background-3 {
  background: url(http://placehold.it/1000x1000) no-repeat top center fixed;
}
.background-4 {
  background: url(http://placehold.it/1000x1000) no-repeat top center fixed;
}
.background-5 {
  background: url(http://placehold.it/1000x1000) no-repeat top center fixed;
}
.background-6 {
  background: url(http://placehold.it/1000x1000) no-repeat top center fixed;
}
.background-7 {
  background: url(http://placehold.it/1000x1000) no-repeat top...