JSFiddle - React, Tailwind, and code Playground

by twrasia

HTML

<link rel="stylesheet" href="twr.org/tt4lib/css/reset-html5-tag.css">
<script src="//fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic,300,300italic,900|Montserrat:400,700"></script>
<link rel="stylesheet" href="twr.org/tt4lib/css/fonts/font-awesome/4.3.0/font-awesome.css">
<link rel="stylesheet" href="twr.org/css/main.css?v=1">
<link rel="stylesheet" href="https://donate.twr.org/jquery/jquery-ui-1.8.2.custom.css">
<link rel="stylesheet" href="twr.org/css/home.css?v=1">
<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] + ")";

 ...

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;
 ...