JSFiddle - React, Tailwind, and code Playground

by zachreynolds

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheets/bootstrap3.css" media="all" />
<link rel="stylesheet" type="text/css" href="assets/css/style.css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" language="JAVASCRIPT" type="text/javascript"></script>
  
  
  <script>
$(window).on("load", function(){
$('.container').delay(0).fadeIn(500);
});
</script>
  
  <script>
$(window).on("load", function(){
$('#particles-js').fadeIn(500);
});
</script>


  <script>
$(window).on("load", function(){
$.ready.then(function(){
$("h3").each(
function (index) {
$(this).wrapAll("<div class='mm'></div>");
});
});
});
</script>

  <script>
$(window).on("load", function(){
$.ready.then(function(){
$(".content").each(
function (index) {
$(this).wrapAll("<div class='mm2'></div>");
});
});
});
</script>
  
  
  <div id="header-sroll" class="">
    <h1>
        Please use Firefox or Chrome for full fuctionality
    </h1>
</div>
  
<style>
  #canvasbg{
  display: inline-block;
  vertical-align: baseline;
  position: fixed;
  z-index: -500000;}
</style>

  <script type="text/javascript">
$('#barlinecon').on('click', function () {
    $('.bbb').fadeToggle(300).toggleClass('ccc');
})
</script>

<script type="text/javascript">
$( document ).ready(function() {
    $(".rssFeed a").attr('target','_blank');
});
</script>
  

  
  
<div id="barlinecon">
    <div class="navbarline">
    </div>

    <div class="navbarline">
    </div>

    <div class="navbarline">
    </div>
</div>


  <div id="behindbar" class="behindbar1">
    <div id="logotop">
        <a href="https://wiredintel.jimdo.com/">WiredIntel</a>
    </div>

    <p class="pnav1">
        <a...

CSS

.youtube-box,
.youtube-frame {
  display:block;
  width: 100%; /* video width */
  height:315px; /* video height */
  background-color:black;
  background-size:100%;
  position:relative;
  border:none;
  margin:3px 0px -9px 0px;
  padding:0px 5px 0px 5px !important;
  background-position: 50% 50%;
  background-position-x: 50%;
  background-position-y: 50%;
  background-repeat:no-repeat;
  text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 0px;
}

.youtube-box span {
  display:block;
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
}

.youtube-box .youtube-title {
  background-color:rgba(0,0,0,0.9);
  font:bold 15px Verdana,Arial,Sans-Serif;
  color:white;
  text-shadow:0px 1px 2px black; 
  bottom:auto;
  line-height:30px;
  height:30px;
  overflow:hidden;
  margin:-2px 0px 0px 0px;
  padding:0px 0px;
}

.youtube-box .youtube-bar {display:none;
  background: #000;
  height:35px;
  display: none;
  top:auto;
}

.youtube-box .youtube-bar .yt-bar-left {
  background: #999;
}

.youtube-box .youtube-bar .yt-bar-right {
  background: #999;
}

.youtube-box .youtube-play {
  cursor:pointer;
  background-color: rgba(0, 0, 0, 0.75);
  box-shadow:
   rgb(255, 255, 255) 0px 0px 0px 5px inset,
   rgba(0, 0, 0, 0.75) 0px 0px 0px 7px inset,
   rgba(0, 0, 0, 0.33) 0px 0px 0px 1px, 
   rgba(0, 0, 0, 0.25) 0px 3px 0px 0px;
   text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 0px;
  width:70px;
  height:70px;
  top:50%;
  left:50%;border-radius:50%;
  margin:-40px 0px 0px -30px;
background-position: 70% 50%;
background-position-x: 70%;
background-position-y: 50%;
background-repeat: no-repeat;
  color: #fff;
  line-height: 56px;
  text-align: center;
  text-transform: uppercase;
}

.youtube-box .youtube-play:hover {
  background-color: #000;
}



















#asterion_toolbar {opacity:0;margin:100px 0 0 0}
#asterion_toolbar:hover {opacity:1;}

#container {display:none;}
#particles-js {display:none;}
/*
#particles-js {  opacity:0;
  -webkit-animation-name:pjs;
  animation-name:...