JSFiddle - React, Tailwind, and code Playground

by Alyona Fedina

HTML

<!DOCTYPE html>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='style.css'/>
  </head>
  <body>
    <div class="header">
      <div class="container">
        	
<h1>INNOVATION CLOUD</h1>
<p>CONNECT YOUR IDEAS GLOBALLY</p>
<a href="#" class="btn">Learn More</a>
      </div>
    </div>

    <div class="nav">
      <div class="container">
        <ul>
          <li><a href="#" class="btn-nav">Register</a></li>
          <li><a href="#" class="btn-nav">Schedule</a></li>
          <li><a href="#" class="btn-nav">Sponsors</a></li>
          <li><a href="#" class="btn-nav">About</a></li>
          <li><a href="#" class="btn-nav">Contact</a></li>
        </ul>
      </div>
    </div>

    <div class="main">
      <div class="container">
        <div class="img"><img src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" height="130px" width="250px"> </div>
        
<div>
        <h2>The Innovation Cloud Conference</h2>
        <p>  Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
        <p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
         <p> Learn about the latest research and technologies that you can use immediately to invent the future.</p>
  </div>
      </div>
    </div>
    <div class="jumbotron">
    <div class="content">
      <h2>Stay Connected</h2>
      <p>Receieve weekly insights from industry insiders.</p>
      <a href="#" class="btn">Join</a> 
      </div> 
      </div>
    <div class="footer">
      <p>&#169; Innovation Cloud Conference</p>
    </div>
    
  </body>
</html>

CSS

html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
}

.container {
	margin: 0 auto;
	max-width: 940px; 
	padding: 0 10px; 
}


/* Header */
.header {
  background: url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg') no-repeat center center /cover;
  height: 800px;
  text-align: center;

}

.header .container {
	position: relative;
	top: 200px;
  color: white;
}

.header h1 {
	font-size: 80px;
	line-height: 100px; 
	margin-top: 0;
	margin-bottom: 80px;
}

@media (min-width:850px) {
	.header h1 {
		font-size: 120px;
	}
}

.header p {
	font-weight: 500;
	letter-spacing: 8px;
	margin-bottom: 40px;
	margin-top: 0;
}

.btn{
background: black;  
padding: 8px 30px; 
color: white;
text-decoration: none;
text-transform: none;
}

.btn:hover {
	background: #117bff;
	cursor: pointer; 
	transition: background .5s;  
}


/* Nav */
.nav{
 background-color: black;
  height: 80px;
}

.btn-nav{

background: black; 
font-size: 14px;
padding:  32px 13px 31px; 
color: white;
text-decoration: none;
text-transform: none;
}

.btn-nav:hover {
	border: none;  
	background: #117bff;
	cursor: pointer; 
	transition: background .5s;  
}

  .nav ul {
    height: 80px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
  }

.nav li{
 
  color: #fff;
  display: inline-block;
  height: 80px;
  line-height: 80px;
  transition: background .5s;
}


/* Main */
.main .container {
	margin: 80px auto;
    clear: both;
}


/* Jumbotron */
.jumbotron {
  background: url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/jumbotron_bg.jpg') no-repeat center center /cover;
	height: 600px;
  text-align: right; 
   color: white; 
  }

.jumbotron .content{
 padding-top: 230px;
  padding-right: 50px; 
}



.img{
 margin-top: 30px;
 float: left; 
}


/* Footer */
.footer { 
  height: 80px;
  position: absolute;
  width: 100%;
  background-color: black;
  color:white; 
	font-size: 14px;
}
.footer p{
...