JSFiddle - React, Tailwind, and code Playground

by Dion Pascal N

HTML

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<?php /** * Created by IntelliJ IDEA. * User: DELL * Date: 8/14/2014 * Time: 6:23 PM */ ?>
<!doctype html>
<body unselectable='on' onselectstart='return false;' onmousedown='return false;' onunload="">
    <div class="share-block visible-md visible-lg"> <a href="" class="home">Home</a>
 <a href="" class="regist">Registrasi</a>
 <a href="" class="fitur">Fitur</a>
 <a href="" class="share">Share</a>

    </div>
    <header class="hidden-lg hidden-md">
        <nav> <a href="" class="logo"></a>

            <menu>
                <ul>
                    <li><a href="" class="active">HOME</a>
                    </li>
                </ul>
            </menu>
            <div class="social-bar visible-lg visible-md"> <a href="" class="facebook"></a>
 <a href="" class="twitter"></a>
 <a href="" class="instagram"></a>

            </div>
        </nav>
    </header>
    <div class="body-wrapper">
        <header class="visible-lg visible-md">
            <nav> <a href="" class="logo"></a>

                <menu>
                    <ul>
                        <li><a href="" class="active">HOME</a>
                        </li>
                    </ul>
                </menu>
                <div class="social-bar visible-lg visible-md"> <a href="" class="facebook"></a>
 <a href="" class="twitter"></a>
 <a href="" class="instagram"></a>

                </div>
            </nav>
        </header>
        <div id="sec1" class="section s1">
            <div class="content s1">
                <!-- <div class="slider">
                <div id="banner-fade">

                <ul class="bjqs">
                      <li style="vertical-align:bottom;height:100%"><img...

CSS

@font-face {
    font-family: RobotoBold;
    src: url(../fonts/Roboto-Bold.ttf);
}
.container {
    position:relative;
}
.section {
    background-color: #FFFFFF;
}
/*#sec1 .container {
    min-height:790px;
}

.section .content.s1 {
    height: 100%;
    width: 900px;
    margin: 0px auto;
    display: block;
    position: fixed;
}

.section .content.s1 .container.right {
    float: right;
    width: 500px;
    margin-top: 20%;
    margin-right: -10%;
}*/
 .btn-down {
    cursor: pointer;
    cursor: hand;
}
.share-block a {
    float:right;
    clear:both;
    width: 50px;
    margin-right: 20px;
    padding-right: 0px;
    padding-left:10px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.share-block a:hover {
    padding-right: 170px;
    background-color:rgba(255, 229, 181, 0.8) !important;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
a:hover, a:focus {
    text-decoration: none !important;
}
/* -------------------------------------------- Fitur 2 : Tambah Produk -------------------------------------------- */
 .section.fitur2 {
    background:url(../images/fitur/bg-fitur2.png) top center no-repeat fixed #FFFFFF;
    background-size: 1920px auto;
    position:relative;
}
.fitur2 .title {
    margin: 80px auto 0px;
    text-shadow: none;
    position:relative;
    text-align: center;
}
.fitur2 .title span {
    font-size:70px;
    font-family: RobotoBold;
    color: #4b4848;
    text-shadow: -2px 4px rgba(0, 0, 0, 0.1);
}
.fitur2 .title p {
    font-size: 20px;
    font-family: RobotoLI;
    color: #606060;
    margin:0;
}
.fitur2 .fitur-header {
    width: 70%;
    display: block;
    margin: 0 auto;
    min-height: 400px;
   ...

JavaScript

/*
The Goal is to make the yellow part "DOWNLOAD GRATIS" and the rest of the containers down appears full in mobile, with the grey part is as minimum or even not seen at all
*/