JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">

      <div class="container">

        <div class="navbar-header">

          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

            <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="#">Project name</a>

        </div>

        <div class="collapse navbar-collapse">

          <ul class="nav navbar-nav">

            <li class="active"><a href="#content1">Home</a></li>

            <li><a href="#content2">About</a></li>

            <li><a href="#content3">Contact</a></li>

            <li><a href="#content4">Portfolio</a></li>



          </ul>

        </div><!--/.nav-collapse -->

      </div>

    </div>



    <!-- Begin page content -->

    <div class="container">



		<div class="container">



		</div>



	<div id="content1" class="content">

		<div class="container">	 
			<div class="img-container1">

				<img src="http://placehold.it/931x754"  alt="..." class="img-responsive img-rounded">		
			</div>
			<div class="text-container">
                <p>TEST</p>                
            </div>
            <div class="another-container">
                <p>TEST</p>
            </div>
		</div>

	</div>



	<div id="content2" class="content">

	</div>



	<div id="content3" class="content">

	</div>

	<div id="content4" class="content">

	</div>





    </div>



    <div id="footer">

      <div class="container">

        <p class="text-muted">Place sticky footer content here.</p>

      </div>

    </div>

CSS

.content{height:100vh}

			#content1{background:#fff}

			#content2{background:#fff}

			#content3{background:#fff}

			.img-container1 { float:left; height:60% !important; width:30%}

.text-container { float: left; width: 20%;  } 

.another-container { float: left; width: 20%;  } 

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 7% !important;
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}
.container .text-muted {
  margin: 20px 0;
}

#footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}