JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="navbar navbar-inverse">
            <div class="container">
                  <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                      <a class="navbar-brand" href="#"><img src="images/Logo.png" alt="logo"></a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
                      <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Features</a></li>
                        <li><a href="#">About</a></li>
                          <li><a href="#">Pricing</a></li>
                          <li><a href="#">Reviews</a></li>
                          <li><a href="#">Contact</a></li>
                        
                      </ul>
                      
                    </div><!-- /.navbar-collapse -->
                  </div><!-- /.container-fluid -->
                 </div>
                </nav>
       <!-- start of the jumbtron -->
        
        <div class="jumbotron">
          <div class="container">
            <div class="row">
                
                <div class="col-md-6">
                    <img src="images/Logo2.png" alt="logo">
                    <h3 class="h3">MODERN AXURE TEMPLATE FOR BEAUTIFUL PROTOTYPES</h3>
                    <hr>
                    <div...

CSS

body{
    padding-top: 50px;
}

.navbar{
    margin: 0;
    border-radius: 0;
    height: 70px;
    padding-top: 10px;
    background-color: #000000;
    font-family: 'Open Sans';
    font-weight: 550;
}


/* start jumbtron */
.jumbotron {
    background: url(images/image.png);
    height: 711px;
    width: 100%;
    padding-top: 150px;
} 

.h3 {
    font-family: Raleway;
    font-size: 36px;
    color: #ffffff;
    font-weight: 400;
}

hr {
    height: 16px;
    width: 74px;
    float: left;
}
.paragraph {
    font-family: Raleway;
    font-size: 16px;
    line-height: 23px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
}

.btn-jumbtron {
    margin-top: 50px;
    height: 42px;
    width: 135px;
    background: none;
    border-radius: 0;
    color: #ffffff;
    font-family: Raleway;
}

.btn-jumbtron:hover {
    color: #000;
}


.jumbotron form {
    height: 260px;
    width: 374px;
    background-color: #fff;
    margin-left: 150px;
    border-radius: 5px;
}

.try {
    margin: 30px 50px;
}

.jumbotron .jumbo-form {
    font-family:Raleway;
    padding: 20px auto;
    height: 368px;
    width: 260px;
}

.jumbotron form input {
    width: 300px;
    margin: 30px;
    border: transparent;
    border-bottom: 1px solid #cccccc;
    border-radius: 0px;
    box-shadow: 0px 0px 0px rgba(0, 0, 0,) ;
}

.jumbotron form h2 {
    text-align: center;
    background-color: #FF9B51;
}