JSFiddle - React, Tailwind, and code Playground

by markob83

HTML

<link rel="stylesheet" href="http://minnebyte.com/sandbox/orna/wp-content/themes/orna/assets/css/bootstrap.min.css">
<div class="container">

    <div class="row">

        <div class="sign-up col-sm-9">

            <div class="col-sm-4">
                          
                <h3>SIGN UP to get the latest updates</h3>
                          
            </div>
                      
            <div class="col-sm-4">
                
                <p>TEXT</p>
                
            </div>
                      
            <div class="col-sm-4">
                
                <p>TEXT</p>
                          
            </div>
            
        </div>  <!-- /.sign-up -->          

            <div class="submit col-sm-3">
        
                <input type="submit" value="Submit"/>
        
            </div>
                
    </div> <!-- /.row -->

</div><!-- /.container -->

CSS

.sign-up {
  background: #002d56;
  padding: 0px 0px;
  color: #ffffff;
  font-size: 20px;
  height:138px;  
}

.sign-up h3{
  padding: 10px 0px;
  font-size: 20px;
}

.sign-up:after {
  content: "";
  display: block;
  width: 0; 
  height: 0; 
  border-color: transparent transparent transparent #002d56;
  border-style: solid;
  border-width: 68px 0 70px 70px;
  position: absolute;
  right: 0;
  background:#fff;  
}

.submit:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;  
  width: 0;
  height: 0;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
  border-width: 70px 0 70px 70px;
}

.submit {
  background: #cfab7a;
  padding: 10px 0px;
  font-size: 20px; 
  height:138px;  
}

.submit input[type="submit"] {
  background: #cfab7a;
  padding: 10px 0px;
  border: none;
  margin: auto;
  display:block;  
}