JSFiddle - React, Tailwind, and code Playground

by roberkules

HTML

<script src="https://code.jquery.com/jquery-latest.js"></script>

<div class="imagewrap">


    <div class="center">
        <img src="pictures/AppCardLogo.png">

    </div>
    <label class="Welcome">Welcome to AppCard</label>
    <label class="Internet">No Internet</label>
    <label class="Intro">First we need to choose how to connect to the internet</label>

    <div class="machine">
        <img src="pictures/bg2.png">

    </div>


    <div id="bottom">

        <img src="pictures/bg.png" class="left-background">
        <input type="button" class="button-left" id="button-left" value="TEST">

        <input type="button" class="button-right" id="button-right" value="TEST">
    </div>

CSS

/* Landscape phone to portrait tablet */

            *{
                padding: 0;
                margin: 0;
            }

            body {
                color: white;
            }

            input[type=text] {
                width: 100%;
                padding: 100px 1px;
            }



            .center {
                margin: auto;
                width: 25%;
                padding: 10px;
            }

            .Welcome{
                height: 100%;
                width: 100%;
                color: grey;
                font-family: Helvetica;
                text-align: center;
                display: block;
                font-size: 3.3em;
                padding-top: 0.5em;
            }
            .Internet{
                height: 100%;
                width: 100%;
                color: red;
                font-family: Helvetica;
                text-align: center;
                display: block;
                font-size: 1.4em;

            }
            .Intro{
                height: 100%;
                width: 100%;
                color: black;
                font-family: Helvetica;
                text-align: center;
                display: block;
                font-size: 2.7em;
                padding-top: 1em;
            }
            .left-background{
                padding-top: 10px;
                position: relative;
                height: 100%;
                width: 100%;
                display: inline-block;
            }
            .machine{
                margin: auto;
                width: 56%;
                padding: 10px;
            }
            #bottom{
                position: relative;
                display: block;


            }
            .button-left{
                display: inline-block;
                left: 7%;
                top: 30%;
                height: 300px;
                width: 40%;
                position: absolute;
                font-size: 500px;
          ...

JavaScript

function set_body_height() { // set body height = window height
            $('body').height($(window).height());
        }
        $(document).ready(function() {
            $(window).bind('resize', set_body_height);
            set_body_height();
        });