JSFiddle - React, Tailwind, and code Playground

by J R

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<html>
<head>
<title>i2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.navbar-header,
.navbar-brand {
    line-height: 70px;
    height: 70px;
    padding-top: 0;
}
.affix .navbar-default {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    background-color: transparent;
    background: transparent;
}
.affix {
    width: 100% !important;
}
@media screen and (min-width: 768px) {
.navbar-header {
    padding-left: 200px;
    text-align: center;
}
}
.top-bg{
background-color: #3f3f3f;
width: 100% !important;
}
.top-banner{
    background-image: url("http://128.199.129.158/background.png");
    background-repeat: repeat;
    background-position: center center;
    background-size: 100%;
    width:60%;
    margin-left: 20%;
}
#nav
{
     z-index:1000;
     margin-left: -15px;
}
.bg-gray{
background-color: #777;
}   
    
</style>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
	<!-- Static navbar -->
     <div id="nav" data-spy="affix">
      <nav class="navbar navbar-default" style="background-color:black;background: rgba(0,0,0,0.85);">
	<div class="container-fluid">
          <div class="navbar-header header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle...

CSS

.navbar-header,
.navbar-brand {
    line-height: 70px;
    height: 70px;
    padding-top: 0;
}
.affix .navbar-default {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    background-color: transparent;
    background: transparent;
}
.affix {
    width: 100% !important;
}
@media screen and (min-width: 768px) {
.navbar-header {
    padding-left: 200px;
    text-align: center;
}
}
.top-bg{
background-color: #3f3f3f;
width: 100% !important;
}
.top-banner{
    background-image: url("http://128.199.129.158/background.png");
    background-repeat: repeat;
    background-position: center center;
    background-size: 100%;
    width:60%;
    margin-left: 20%;
}
#nav
{
     z-index:1000;
     margin-left: -15px;
}
.bg-gray{
background-color: #777;
}