JSFiddle - React, Tailwind, and code Playground

by ds345

HTML

<link rel="stylesheet" href="http://thesearethings.com/css/theme-newsslider.css">
<link rel="stylesheet" href="http://thesearethings.com/css/anythingslider.css">
<div id="topbar">
    <div style="width:960px;margin:auto">
        <img src="http://thesearethings.com/img/topbar-logo.png" alt="DEMO" />
        <p class="nav"> 
        <p class="login_popup">  <a class="button" href="#"><span style="font-weight:bold">Login</span></a>
            <div class="popup">	<a href="#" class="close">X</a>
                <form> <span class="title">Username</span> 
                    <input name="" type="text" />
                    <br/> <span class="title">Password</span> 
                    <input name="" type="password" />
                    <br/>
                    <input name="" type="button" value="Login" />
                </form>
            </div>
        </p>
        </p>
    </div>
    
    
<div id="wrapper">
    <div class="container">
        <div id="content">
            <div id="mainpromo">
                <div class="anythingSlider anythingSlider-metallic activeSlider" style="width: 920px; height: 450px;"><span class="arrow back"><a href="#">«</a></span><span class="arrow forward"><a href="#">»</a></span>

                    <div class="anythingWindow">
                        <ul id="slider1" class="anythingBase" style="width: 5520px;">
                            <li class="panel cloned" style="width: 920px; height: 450px;">
                                <img src="http://thesearethings.com/img/shop/promo-goldblack.jpg" alt="Rep Your Hood with City Neighborhoods Maps by These Are Things" />
                            </li>
                        </ul>
                    </div>
                    <div class="anythingControls"><a href="#" class="start-stop">Start</a>

                        <ul class="thumbNav">
                            <li><a href="#" class="panel1 cur">1</a>

                            </li>
                           ...

CSS

a {
    text-decoration: none;
    color: #666;
}
#topbar {
    background: url("http://thesearethings.com/img/topbar.png") repeat scroll left top transparent;
    height: 75px;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5000
}
#topbar p {
    color: #FFFFFF;
    float: right;
    font-size: 16px;
    font-style: italic;
    font-weight: 100;
    letter-spacing: 1px;
    line-height: 45px;
}
#topbar p a {
    color: #fff;
}
#topbar p a:hover {
    text-shadow: 0 0 5px #fff;
}
strong {
    font-weight: bold;
}
form {
    background: #eee;
    padding: 10px;
}
form p {
    padding: 5px 0;
}
form .title {
    min-width: 100px;
    display: inline-block;
}
form input[type=text], form input[type=password] {
    border: 1px solid #fff;
    padding: 5px;
}
.overlay {
    z-index:5;
    background: rgba(0, 0, 0, .50);
    display: block;
    position:fixed;
    width: 100%;
    height: 100%;
}
.popup {
    padding: 10px 10px 35px;
    background: #fff;
    z-index: 999;
    display: none;
    position: absolute;
    right: 0;
}
.close {
    font-weight: bold;
    color: #F00;
    float: right;
    position: absolute;
    top: 5px;
    right: 10px;
}
#mainpromo {
    border: 15px solid #fff;
    box-shadow: 0 0 15px rgba(128, 78, 35, 0.3);
    margin:0;
    width:920px;
    height: 450px;
    clear: left;
    background: #ccc;
}
ol, ul {
    list-style: none;
    margin-bottom: 1em;
}
li {
    list-style: none;
}
#content {
    margin-top: 75px;
    margin: 75px auto 0;
    width: 960px;
}
img {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
a, a:link, a:active, a:visited {
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    color:#f0542f;
    outline: none;
    text-decoration:none;
}
a:hover {
    color:#fff;
    background: #f0542f;
}

JavaScript

$(document).ready(function () {
    $(".button").click(function (e) {
        $("body").append('');
        $(".popup").show();
        $(".close").click(function (e) {
            $(".popup, .overlay").hide();
        });
    });
});

$(document).ready(function () {
    $(".button").click(function (e) {
        $("body").append('<div class="overlay"></div>');
        $(".popup").show();

        $(".close").click(function (e) {
            $(".popup, .overlay").hide();
        });
    });
});

$(function () {
    $('#slider1').anythingSlider({
        startStopped: false,
        width: 920,
        height: 450,
        theme: 'metallic',
        onSlideComplete: function (slider) {}
    });


});