JSFiddle - React, Tailwind, and code Playground

Join COI Setup Page

by Meredith Crow

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/custom/css/cache/137de011e0fc2440ce11c99272733d49.css?yakabox-vne-5.17.8-1">
<div class="row ui-oak-broadcast-joinCoi">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4">
        <h2>Setup Your Profile:</h2>
        <div>
          <div>
            <div class="form-group clearfix">
              <div class="col-md-12 form-control-value">
                <div>
                  <div id="" class="ybx-drag-n-drop-wrapper ui-drag-n-drop-wrapper ui-yakabox-media-uploads">
                    <div>
                      <div id="IconUploaderWidget1538416718" class="IconUploaderWidget ui-yakabox-iconUploaderWidget"><img id="IUWThumbnail1538416718" class="IUWThumbnail" src="https://yakabod.yakabox.com/images/userupload/stock_users/thumbnail_365.svg?v=20181001"><button type="button" id="IUWEdit1538416718" class="btn btn-primary" title="Click to Edit Icon"><span class="fa fa-pencil"></span><span class="hidden-xs">Edit</span></button></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="form-group clearfix">
              <div class="form-control-value">
                <div>
                  <form class="form-inline">
                    <div class="ybx-profile-user-titlenull">
                      <h5>
                        <div class="form-group clearfix">
                          <div class="col-md-12 form-control-value">
        ...

SCSS

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700);

html {
	height: 100%;
}

body {
	color: #fff;
	position:absolute; 
	top:0; 
	bottom:0; 
	right:0; 
	left:0;
	background:#85989d;
}

.ui-oak-broadcast-joinCoi {
		overflow: hidden;
		min-height: 100%;
		.row > .col-md-4 {
				margin-bottom: -99999px;
    		padding-bottom: 99999px;
				h2 {
						font-weight: bold;
						font-size: 24px;
						text-align: left; 
						padding-left: 15px
				}				
				.control-label {
						padding-left: 0px;
				}				
				.form-group {
    				border-top: none;
 				}
				.form-group:hover {
    				background: transparent;
  			}
				.form-group .fa-pencil {
					width: 25%;
				}
				.ui-yakabox-iconUploaderWidget .btn {
						width: 60px;
				}
		}
		.row > .col-md-8 {
	 			background: #586568;
				margin-bottom: -99999px;
    		padding-bottom: 99999px;
				padding-top: 20px;
				p {
						font-size: 12px;
						text-align:left;
						margin:auto;
						width: 80%;
						padding-bottom: 15px;
					
				}
				h3 {
						margin-top: 10px;
				}
		}
}

JavaScript

$('input#checkBoxLayout').on('change', function() {

  $('.ui-builder > div.row').toggleClass('ui-builder-has-layout');
});