JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://raw.githubusercontent.com/davatron5000/FitText.js/master/jquery.fittext.js"></script>
<div class="all_content">
<div id="navigation">
    <div id="logo"><img src="http://s22.postimg.org/h1un1zj19/logo.png" /></div>
    <ul id="links">
        <li class="item-link active-link"><a href="#">Navigation</a></li>
        <li class="item-link"><a href="#">Navigation</a></li>
        <li class="item-link"><a href="#">Navigation</a></li>
        <div class="clearfix"></div>
    </ul>
    <div id="user_menu">Andrew McMillian <i class="fa fa-caret-down" style="color:#fff;"></i></div>
    <div id="register_login" class="btn_default" style="display:none;">Register/Login</div>
    <div class="clearfix"></div>
    </div>
    <div id="modul1">
        <img src="http://s28.postimg.org/vddqnc30t/bg_modul1.png" />
        <div class="welcome_text">
            <div class="med-font">Welcome to</div>
            <div class="big-font">Honda Walkaround Contest</div>
            <div class="nor-font">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet tempor metus. Proin vestibulum aliquet metus, id porttitor lorem consectetur non. Praesent facilisis dignissim libero, in venenatis enim iaculis ut. Official Rules</div>
        </div>
    </div>    
</div>

SCSS

*{margin:0;padding:0;box-sizing:border-box;}
.clearfix {
	clear:both;
}
.btn_default {
	display: inline;
	width: auto;
	border-radius: 5px;
	padding: 15px 60px;
	cursor: pointer;
}
#navigation {
	display: block;
	position: relative;
	width: 100%;
	max-width: 1280px;
	height: 83px;
	border-bottom: 1px solid #17365c;
	background-color: #002f7a;
	margin: 0 auto;
	z-index: 1;
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
}
#logo {
	display: inline-block;
	padding: 18px 27px;
	vertical-align: top;
}
#register_login {
	position: absolute;
	color: #fff;
	font-weight: bolder;
	background-color: #0075c0;
	right: 27px;
	top: 18px;
}
#links {
	padding-top: 30px;
	position: relative;
	display: inline-block;
	width: auto;
	height: auto;
	list-style: none;
	margin-left: 20px;
	.item-link {
		display: block;
		float: left;
		margin-left: 40px;
		text-align: center;
		color: #dfe2e9;
		a {
			color: inherit;
			&:hover {
				color: #9ec4dc;
				text-decoration: none;
			}
		}
	}
	.active-link {
		color: #9ec4dc;
		text-transform: uppercase;
		border-bottom: 1px solid #9ec4dc;
	}
}
#user_menu {
	display: block;
	float: right;
	color: #9ec4dc;
	cursor: pointer;
	padding: 30px 27px;
}
#modul1 {
	display: block;
	position: relative;
	margin: 0 auto;
	height: auto;
	width: 100%;
	max-width: 1280px;
	img{
		width: 100%;
		height: auto;
		position: absolute;
		pointer-events: none;
	}
}
.welcome_text {
	position: relative;
	color: #fff;
	z-index: 1;
	width: 60%;
	padding-left: 60px;
	padding-top: 80px;
}

JavaScript

'use strict';
$(document).ready(function(){
	$('.nor-font').fitText(1, { minFontSize: '10px', maxFontSize: '18px' });
	$('.med-font').fitText(1, { minFontSize: '20px', maxFontSize: '30px' });
	$('.big-font').fitText(1, { minFontSize: '30px', maxFontSize: '50px' });
});