JSFiddle - React, Tailwind, and code Playground

by twrasia

HTML

<section class="hero" id="intro">
    <div class="text container">
        <h1>Speaking <span>Hope</span> <br/>to the World <br/><span class="rotate">in 230 Languages, by Radio, Online at TWR360, All the Time</span></h1>
<!-- <h1 class="rotate">I have so many questions about Jesus and no-one who can answer them, There are no churches or missionaries where I am, My family would be furious if they found out I was a Christian, I can't read can you explain the Bible to me</h1>    
-->
    </div>
        
    <div id="random-hero-image" class="img-carousel"></div>
    
<!-- code for random hero background image...-->
<script type="text/javascript">
    var imgCount = 7;
    var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
    var images = new Array
        images[1] = "<img src="/media/image/sister.png">",images[2] = "/images/r/twr-hero-bg-3/c1680x900g0-0-1680-897/twr-hero-bg-3.jpg",images[3] = "/images/r/twr-hero-bg-4/c1680x900g0-0-1680-897/twr-hero-bg-4.jpg",images[4] = "/images/r/15934721891_cf9dfbc093_o/c1680x900g0-103-3499-1976/15934721891_cf9dfbc093_o.jpg",images[5] = "/images/r/asian-woman-hero-image-fixed/c1680x900g0-0-1680-897/asian-woman-hero-image-fixed.jpg",images[6] = "/images/r/hero-image-boys-fixed/c1680x900g0-241-5184-3015/hero-image-boys-fixed.jpg",images[7] = "/images/r/hero-image-girl-fixed/c1680x900g0-23-3504-1898/hero-image-girl-fixed.jpg",
    document.getElementById("random-hero-image").style.backgroundImage = "url(" + images[randomCount] + ")"; 
</script>
    
</section>

<!-- 
<div id="hero" class="img-carousel">{% functions.carousel('58e1d16d7ffa79145279a0ed', 'carousel_asiahero') %}</div>
-->

<!-- THE NEED -->
<section class="segment2">
    <h1>Everyone needs <br />to hear the gospel</h1>
    <p>but many have little or no access to the good news because they're...</p>     

    <div class="container">
        <section id="need-icons">
        <div>
            <figure>
                <img...

CSS

.site-header {
  margin-bottom: 0;
}


<!-- CAROUSEL -->





<!-- INTRO / HERO */ -->

#intro {
  position: relative;
  height: 25.6em;
}
@media (max-width: 640px) {
  #intro {
    height: 19.2em;
  }
}
@media (max-width: 480px) {
  #intro {
    height: 16em;
  }
}
#intro .text {
  position: relative;
  z-index: 2;
}
#intro .img-carousel {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #444;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}
@media (max-width: 860px) {
  #intro .img-carousel {
  background-size: cover;
  }
}
#intro h1 {
  position: relative;
  font-size: 3em;
  line-height: 1.06667em;
  margin: 0em;
  padding-top: 1.6em;
  padding-bottom: 0em;
  margin-right: 33%;
  font-family: "Lato", helvetica, arial, sans-serif;
  font-weight: 100;
  color: #fff;
  text-align: left;
}
@media (min-width: 1501px) {
  #intro h1 {
    margin-right: 5em;
  }
}
@media (max-width: 1020px) {
  #intro h1 {
    font-size: 2em;
    line-height: 1.2em;
    margin: 0em;
    padding-top: 2.4em;
    padding-bottom: 0em;
    margin-right: 8em;
  text-align: left;
  }
}
@media (max-width: 570px) {
  #intro h1 {
    font-size: 1.4em;
    line-height: 1.25714em;
    margin: 0em;
    padding-top: 1.14286em;
    padding-bottom: 0em;
    font-weight: normal;
    margin-right: 7em;
  text-align: left;
}
}
#intro h1 span {
  font-family: "Montserrat", helvetica, arial, sans-serif;
  font-weight: 900;
}
#intro h1 .rotate {
  display: block;
}
#intro h1 .emphasize {
  text-transform: uppercase;
}



<!-- STATEMENT -->

#statement {
  margin: 0;
  padding: 4.8em 0;
}
#statement p {
  max-width: 900px;
  font-size: 1.5em;
  line-height: 1.42293em;
  margin-top: 0em;
  margin-bottom: 1.06667em;
  padding: 0em 1.06667em;
  margin-right: auto;
  margin-left: auto;
  font-weight: lighter;
  text-align: center;
}
@media (max-width: 640px) {
  #statement {
    padding: 1.6em 0;
  }
 ...