JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.3/css/all.css">
<div class="slides">
<div id="about" class="aboutSlide position-relative">

<div class="bg-primary v-centerWrap">
  
<div class="bg-secondary v-centerContainer">

<div class="bg-dark v-centerContent">

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="16000">

  <div class="carousel-inner container" role="list-box">
    
	<div data-target="#carouselExampleIndicators" data-slide-to="0" class="carousel-item active" alt="First slide">
	
<h1 class="text-white headline abouthead font-weight-bold">About Us</h1>
<p class="text-white bigsentence">Creative Minds Meet is a local community of artists, musicians, filmmakers, actors, models, photographers, designers, writers, programmers, entrepreneurs and other creatives in the South Florida area. 
We specialize in creating unique networking events that give people a chance to present their work, and connect with their fellow peers.     
</p>

    </div>
	
    <div data-target="#carouselExampleIndicators" data-slide-to="1" class="carousel-item slide carousel-fade" alt="Second slide">
  
<h1 class="text-white headline font-weight-bold abouthead">What is our mission?</h1>
<p class="text-white subheadline">To bring local creatives together and inspire them to share, support, and prosper as a collective.</p>

    </div>
    
  </div>


   <a...

CSS

.v-centerWrap { align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center; flex: 1 1 0%;
  min-width: 100vw; }

/*--Vertically Centered Container - Accounts for Footer ---*/ 	  
.v-centerContainer {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center; height:100vh; width:100vw;
		} 
		
/*--Vertically Centered Content - Prevents noWraps bug ---*/ 	  
.v-centerContent {
  width:100vw; 
  text-overflow: ellipsis;
  white-space: wrap;
		} 		
    
    	.aboutSlide{ 
	 background-repeat: no-repeat;
  background-position:center center;
  background-attachment: scroll;
  -webkit-background-size:auto;
  -moz-background-size:auto;
  background-size:auto;
  -o-background-size: auto;
  height:100vh !important;  
	}


	.aboutSlide{min-height:1550px;}
  
  


/* XXS Tiny devices (smartphones, 199px and down)*/
@media (max-width: 199px) { 
	.headline {font-size: 12px; }
	
	.title {font-size:16px;}
	.titleline {font-size:14px;}
	.subheadline{font-size: 13px; margin-top:15px;}
	
	.bigsentence {font-size:14px !important;}		
	.sentence {font-size:11px!important;}
	.lilsentence{ font-size:10px !important;}
	.error-class{ font-size:10px !important;}
	
	.carousel-control-prev i {font-size:11px;}

	.carousel-control-next i {font-size:11px;}
	}

/* Extra Tiny devices (smartphones, 200px and up)*/
@media (min-width: 200px) { 
	.headline {font-size: 16px;}
	.title {font-size:16px;}
	.titleline {font-size:14px;}
	.subheadline{font-size: 14px; margin-top:15px;}
	
	.bigsentence {font-size:14px !important;}
	.sentence {font-size:12px !important;}
	.lilsentence{ font-size:12px !important;}
	.error-class{ font-size:12px;}	
	
	.carousel-control-prev i {font-size:13px;}
	.carousel-control-next i {font-size:13px;}
	}
	
/* Tiny devices (smartphones, 325px and up)*/
@media (min-width: 325px) { 
	.headline {font-size:18px;}
	.title {font-size:25px;}
	.titleline {font-size:16px;}
	.subheadline{font-size: 16px;...