JSFiddle - React, Tailwind, and code Playground

by kelvin88degrees

HTML

<h2 class="quotes">first</h2>
<h2 class="quotes">second</h2>
<h2 class="quotes">third</h2>

<input  type="text" name="name" id="searchbox">

<input type='button' id="buttonme" value='Change Content'/>


<header class="header-banner">
  <div class="container-width">
    <div class="logo-container">
      <div class="logo">GrapesJS
      </div>
    </div>
    <nav class="menu">
      <div class="menu-item">BUILDER
      </div>
      <div class="menu-item">TEMPLATE
      </div>
      <div class="menu-item">WEB
      </div>
    </nav>
    <div class="clearfix">
    </div>
    <div class="lead-title">Build your templates without coding
    </div>
    <div class="sub-lead-title">All text blocks could be edited easily with double clicking on it. You can create new text blocks with the command from the left panel
    </div>
    <div class="lead-btn">Hover me
    </div>
  </div>
</header>
<section class="flex-sect">
  <div class="container-width">
    <div class="flex-title">Flex is the new black
    </div>
    <div class="flex-desc">With flexbox system you're able to build complex layouts easily and with free responsivity
    </div>
    <div class="cards">
      <div class="card">
        <div class="card-header">
        </div>
        <div class="card-body">
          <div class="card-title">Title one
          </div>
          <div class="card-sub-title">Subtitle one
          </div>
          <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header ch2">
        </div>
        <div class="card-body">
          <div class="card-title">Title two
          </div>
          <div class="card-sub-title">Subtitle two
          </div>
          <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
          </div>
        </div>
      </div>
...

CSS

.quotes {display: none;}

############



* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.clearfix{
  clear:both;
}
.header-banner{
  padding-top:35px;
  padding-bottom:100px;
  color:rgb(255, 255, 255);
  font-family:Helvetica, serif;
  font-weight:100;
  background-image:url("http://grapesjs.com/img/bg-gr-v.png"), url("./img/work-desk.jpg");
  background-attachment:scroll, scroll;
  background-position-x:0%, 50%;
  background-position-y:0%, 50%;
  background-repeat-x:no-repeat, no-repeat;
  background-repeat-y:repeat, no-repeat;
  background-size:contain, cover;
}
.container-width{
  width:90%;
  max-width:1150px;
  margin-top:0px;
  margin-right:auto;
  margin-bottom:0px;
  margin-left:auto;
}
.logo-container{
  float:left;
  width:50%;
}
.logo{
  background-color:rgb(255, 255, 255);
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
  width:130px;
  padding-top:10px;
  padding-right:10px;
  padding-bottom:10px;
  padding-left:10px;
  min-height:30px;
  text-align:center;
  line-height:30px;
  color:rgb(77, 17, 79);
  font-size:23px;
}
.menu{
  float:right;
  width:50%;
}
.menu-item{
  float:right;
  font-size:15px;
  color:rgb(238, 238, 238);
  width:130px;
  padding-top:10px;
  padding-right:10px;
  padding-bottom:10px;
  padding-left:10px;
  min-height:50px;
  text-align:center;
  line-height:30px;
  font-weight:400;
}
.lead-title{
  margin-top:150px;
  margin-right:0px;
  margin-bottom:30px;
  margin-left:0px;
  font-size:40px;
}
.sub-lead-title{
  max-width:650px;
  line-height:30px;
  margin-bottom:30px;
  color:rgb(198, 198, 198);
}
.lead-btn{
  margin-top:15px;
  padding-top:10px;
  padding-right:10px;
  padding-bottom:10px;
  padding-left:10px;
  width:190px;
  min-height:30px;
  font-size:20px;
  text-align:center;
  letter-spacing:3px;
  line-height:30px;
  background-color:rgb(217, 131, 166);
  border-top-left-radius:5px;
  border-top-right-radius:5px;
 ...

JavaScript

(function() {

    var quotes = $(".quotes");
    var quoteIndex = -1;
   
   
    function showNextQuote(){
     $("#buttonme:visible").hide();
        ++quoteIndex;
        var quoteToCheck = quotes.eq(quoteIndex % quotes.length);
     
        quoteToCheck
            .fadeIn(200).delay(20)
            .fadeOut(2000, function(){
       
    $("#buttonme").show();
    quizFunc(quoteToCheck.text());
   
   }); 
            
            
            
           
         
              
      
                
   
    
 }
    
       function quizFunc(val) {
     
     		var valueFromFirst = val;
             
        
$("#buttonme").unbind().click(function(){

 			var searchterms = $('#searchbox').val();
      
      
      if(valueFromFirst.toLowerCase() === searchterms.toLowerCase()){
      alert("good");
      
      }else{
      alert("bad");
      }
      
      showNextQuote();
   
			});       
    
}
showNextQuote();

 
   
    
    
    
})();