JSFiddle - React, Tailwind, and code Playground

by jdarville

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://atlanticserviceinvoice.com/scratch/contactform/all.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="http://www.zazar.net/developers/jquery/zweatherfeed/jquery.zweatherfeed.min.js"></script>
<div data-role="page" id="pageone">
    <div data-role="panel" id="myPanel" data-position="right">
         <h2>Options.</h2>

        <p>Welcome to the options</p> <a href="#pageone" data-rel="close" data-role="button" data-icon="delete">Close</a>  <a href="#logout" data-role="button" data-icon="minus">Logout</a> 
    </div>
    <div data-role="header" data-position="inline" data-theme="a" id="index">
        
        
        <a href="#left-panel" data-icon="home" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a>
        
     

        <div class="weatherinfo" id="test1"></div>
        <div class="weatherinfo" id="test2"></div>
        <div class="weatherinfo" id="test3"></div>
        <div class="microsoft container">
            <p class="marquee">Dispatch: 7 Calls</p>
            <p class="marquee">Calls on Hold: 7 Calls</p>
            <p class="marquee">Open calls: 7 Calls</p>
            <p class="marquee">Grand Total: 7 Calls</p>

        </div> <a href="#myPanel" data-icon="gear" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Options</a>

    </div>
    <div data-role="main" class="ui-content">
         <h1><center>Welcome, John Darville</center></h1>
        <p><center>Calls on Hold: 1</center></p>
        <p><center>Open Calls: 1</center></p>
        

        <center><a href="index.html" id="button1" data-role="button" data-icon="back" data-iconpos="top" data-mini="true" data-inline="true">Contacts</a>
            
            
 <a href="index.html" id="button2"...

CSS

#button1 {
    height: 100px;
    width: 200px;
    font-size: 58px;
   

}
#button2 {
    height: 100px;
    width: 200px;
    font-size: 58px;
}

#button3 {
    height: 100px;
    width: 200px;
    font-size: 58px;
}

#button4 {
    height: 100px;
    width: 200px;
    font-size: 58px;
}

#button5 {
    height: 100px;
    width: 200px;
    font-size: 58px;
}

#button6 {
    height: 100px;
    width: 200px;
    font-size: 58px;
}
.weatherItem {
    background-size:90px 90px;
    margin-left:60px;
    background-position:left center;
    width:300px;
    height:40px;
}
.weatherItem div {
    margin-left:60px;
    display: inline-block;
    font-size:9px;
    font-family:sans-serif
}
.weatherLink {
    visibility:hidden
}
.weatherWind {
    visibility:hidden
}
.weatherDesc {
    visibility:hidden
}
.weatherTemp {
    visibility:hidden
}
#test2, #test3 {
    display:none;
}
.ui-header {
    height:40px;
    overflow:hidden;
}
.container {
    width: 14em;
    height: 4em;
    margin-left:220px;
    margin-top:-65px;
    overflow: hidden;
    position: absolute;
    box-sizing: border-box;
}
.marquee {
    top: 6em;
    position: relative;
    box-sizing: border-box;
    animation: marquee 15s linear infinite;
}
.marquee:hover {
    animation-play-state: paused;
}
/* Make it move! */
 @keyframes marquee {
    0% {
        top: 8em
    }
    100% {
        top: -11em
    }
}
/* Make it look pretty */
 .microsoft .marquee {
    margin: 0;
    padding: 0 1em;
    line-height: 1.5em;
    font: 1em'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.microsoft:before, .microsoft::before, .microsoft:after, .microsoft::after {
    left: 0;
    z-index: 1;
    content:'';
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 2em;
}
.microsoft:after, .microsoft::after {
    bottom: 0;
    transform: rotate(180deg);
}
.microsoft:before, .microsoft::before {
    top: 0;
}
/* Style the links */
 .vanity {
    color: #333;
    text-align: center;
    font:...

JavaScript

$('#button1').children().children().css('font-size','22px')
$('#button2').children().children().css('font-size','22px')
$('#button3').children().children().css('font-size','22px')

$('#button4').children().children().css('font-size','22px')
$('#button5').children().children().css('font-size','22px')
$('#button6').children().children().css('font-size','22px')


$(".toggle").on("click", function () {
    $(".container").toggleClass("microsoft");
});

$('#test1').weatherfeed(['10001']);
$('#test2').weatherfeed(['07003']);
$('#test3').weatherfeed(['10591']);


$(document).ready(function () {
    var i = 2;
    setInterval(function () {
        $('.weatherinfo').hide("fast");
        $('#test' + i).show("fast");
        i == 3 ? i = 1 : i++;


    }, 12000);
});