JSFiddle - React, Tailwind, and code Playground

by apimenov93

HTML

<html>
<head>
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://code.angularjs.org/angular-1.0.1.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/css/css.css">
    <script src="/static/javascript/lib/style.js"></script>
    <script src="/static/javascript/app/app.js"></script>

    <title>Ordering notice</title></head>
<body>
<div class="main" ng-app="myApp">
    <ul>
        <li><img class="circle-pic" src="http://lorempixel.com/g/300/300/animals"/></li>
        <li><a class="active" href="#home">My Experience</a></li>
        <li><a href="#about">My Opportunities</a></li>
        <li><a href="#news">My Learning</a></li>
        <li><a href="#contact">Log out</a></li>
    </ul>
    <div class="main-box" ng-controller="MyCtrl">

        <h2 class="header-fixed"> Welcome User</h2>
        <div id="content">
            Your first task is to complete your profile by taking a short assessment.
            <br>
            It usually takes 10-15 minutes to complete the assessment, you don’t need to study in advance, and you
            should do it in a quiet place all in one sitting.
            <br>
            Once you’re done we’ll use your results to show you opportunities within your company and to help your
            company hire more talented people just like you!
        </div>

        <button class="btn">Start now</button>
    </div>
</div>
</body>
</html>

CSS

ul {
    list-style-type: none;
    padding: 0;
    background-color: #003744;
    height: 100%;
    display: table-cell;
}

li a {
    display: block;
    color: white;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

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

li img {
    margin-right: 15px;
    padding: 8px 0 8px 16px;
    width: 120px;
    height: 120px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

.main {
    display: table;
    height: 100%;

}

.main-box {
    width: 100%;
    height: 100%;
    display: table-cell;
    border: 10px solid transparent;
    background: #F1F1F1;
    margin: 0;
    overflow: hidden;

}

.header-fixed {
    text-align: center;
    width: 90%;
    padding: 0px;
    margin-top: 0px;

}

.welcome {
    position: absolute;
    margin-top: 40px;
    text-align: center;
    display: table-cell;
    width: 100%;
    line-height: 200%;
    word-wrap: break-word;
    overflow: hidden;

}

.btn {
    border: 0;
    background: #00ff26;
    background-image: -webkit-linear-gradient(top, #00ff26, #19b33d);
    background-image: -moz-linear-gradient(top, #00ff26, #19b33d);
    background-image: -ms-linear-gradient(top, #00ff26, #19b33d);
    background-image: -o-linear-gradient(top, #00ff26, #19b33d);
    background-image: linear-gradient(to bottom, #00ff26, #19b33d);
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    position: absolute;
}

.btn:hover {
    background: #73d195;
    background-image: -webkit-linear-gradient(top, #73d195, #73d195);
    background-image: -moz-linear-gradient(top, #73d195, #73d195);
    background-image: -ms-linear-gradient(top, #73d195, #73d195);
    background-image:...

JavaScript

/**
 * Created by alexeypimenov on 20/03/16.
 */
var myApp = angular.module('myApp', []);


myApp.config(function ($interpolateProvider) {
    $interpolateProvider.startSymbol('::');
    $interpolateProvider.endSymbol('::');
});
function MyCtrl($scope) {
    $scope.name = 'Superhero';
}

$(document).ready(function () {
    $('a').click(function () {
        console.log("hello");
        $(".active").removeClass("active");
        $(this).addClass("active");
    });
});