JSFiddle - React, Tailwind, and code Playground

by santosh_patnala

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div id="content">
    <!-- Content Starts -->
    <div class="outer">
        <div class="inner" id="main_div">
            <div class="row">
                <div class="col-lg-12">
                    <ul class="breadcrumb" style="margin-bottom: 0" id="Lorem_Ipsum">
                        <li><a href="javascript:void(0);" onclick="Lorem_Ipsum();" class="vt-p">Lorem</a>
                        </li>
                        <li><a href="javascript:void(0);" class="vt-p">Ipsum</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-6" id="showfull" style="height: 1500px;">
                <div class="box">
                    <header>
                        <div class="icons"><i class="glyphicon glyphicon-th-large"></i>
                        </div>
                         <h5>Lorem ipsum</h5>

                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                            <input type="text" onkeyup="Lorem_Ipsum(this);" id="Lorem_Ipsum1" name="Lorem_Ipsum" value="" class="form-control prjsearchbox" placeholder="Lorem Ipsum">
                        </div>
                        <div class="toolbar">
                            <ul class="nav"> <a class="addprj btn btn-metis-3 btn-xs accordion-toggle minimize-box vt-p" data-toggle="collapse" href="#" onclick="addProject(0,0,0);">Lorem ipsum  <i class="icon-chevron-right"></i>
                                    </a>

                            </ul>
                        </div>
                    </header>
                    <div class="body">
                        <ul id="Lorem_Ipsum2" class="pricing-table">
                            <li class="col-lg-12 projectlistsearch">
                                <div id="pr_59" class="prjlistbox selectedProject">
                                   ...

CSS

@font-face {
     font-family:'Astloch';
     font-style: normal;
     font-weight: 400;
     src: local('Astloch'), url(http://themes.googleusercontent.com/static/fonts/astloch/v3/Lip-aAC4yyZnegrgsi4iHA.woff) format('woff');
 }
 #wrap {
     margin: 0 auto;
 }
 /* Set the fixed height of the footer here */
 #footer {
     height: 48px;
 }
 @media (min-width: 768px) {
     html, body {
         height: 100%;
         /* overflow-x:hidden; should be commented for scroll(projectdetails/issuedetails) to work  */
         /* The html and body elements cannot have any padding or margin. */
     }
     #wrap {
         /* Wrapper for page content to push down footer */
         min-height: 100%;
         height: auto !important;
         height: 100%;
         /* Negative indent footer by its height */
         margin-bottom: -48px;
         /* Pad bottom by footer height */
         padding: 0 0 48px;
     }
     form#flip-scroll, form#no-more-tables {
         position:relative;
         overflow:hidden;
         padding:0 50px;
     }
     .pwklnk > a > i, .nwklnk > a > i {
         font-size:5.5em;
     }
 }
 /* -------- END Sticky footer styles ------------------ */
 /*********************************************************/
 /*                 Template Layout                       */
 /*********************************************************/
 body.padTop53 {
     padding-top: 95px;
     overflow: visible;
 }
 @media (min-width: 802px) {
     body.padTop53 {
         padding-top: 54px;
     }
 }
 #wrap:before, #top:before, .head:before, #footer:before, #wrap:after, #top:after, .head:after, #footer:after {
     content:" ";
     /* 1 */
     display: table;
     /* 2 */
 }
 #wrap:after, #top:after, .head:after, #footer:after {
     clear: both;
 }
 #wrap {
     background: #eee url(../../assets/img/greypattern_bg.jpg) repeat left top;
 }
 #right {
     display: none;
 }
 @media (min-width: 768px) {
     #left {
         width: 100px;
         position:...

JavaScript

$(function () {
    $('html, body').animate({
        scrollTop: $(".prjlistbox.selectedProject").offset().top
    }, 'slow');
    $(window).scroll(function () {
        var y = $(window).scrollTop();
        var windowWidth = $(window).width();
        if ((y >= 40) && (windowWidth >= 1180)) {
            $(".detailscontainer").css('position', 'absolute').css('top', (y - 50)).css('margin-left', 0).css('padding-right', 15).css('padding-left', 0);
        } else {
            $(".detailscontainer").css('position', 'static').css('padding-right', 0).css('padding-left', 0).css('margin-left', 0);
        }
    });
});