JSFiddle - React, Tailwind, and code Playground

by adeneo

HTML

<!DOCTYPE HTML>
<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="Forside" />
        <title>Hjortefjellet</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="scripts/jquery.js"></script>
        <!-- Link to jquery so we can center the content -->
    </head>
    
    <body>
        <div class="wrapper">
            <!-- Opens the wrapper so we can contain and center everything -->
            <img src="images/logo.png" width="702" height="87" alt="Your Logo" />
            <nav>
                <ul>
                    <li><a href="index.html">HJEM</a>
                    </li>
                    <li><a href="forum">FORUM</a>
                    </li>
                    <li><a href="doner.html">DONER</a>
                    </li>
                    <li><a href="servere.html">SERVERE</a>

                        <li><a href="faq.html">FAQ</a>
                        </li>
                        <li><a style="margin-right: 0 !important;" href="kontakt.html">KONTAKT</a>
                        </li>
                </ul>
            </nav>
            <div class="clear"></div>
            <div class="box-wrap">
                 <h2>Velkommen til Hjortefjellet</h2>

                <p class="text-box">
                    <!-- PAGE TEXT -->Hjortefjellet er et nytt norsk gaming coummunity som har brukeroplevelsen i fokus. Vi startet opp 21. februar og har nå en Garry's Mod som kjører Trouble in Terrorist Town. Ta gjerne turen innom for å bli bedre kjent med oss.</p>
                <p class="text-box">Has albucius oporteat eu, eos eu etiam intellegam. Has posse dicant feugiat ut, cu quo case convenire definitionem, possim persius meliore no est. Urbanitas vituperatoribus eos in, pro delenit reformidans eu. Nec detracto sadipscing te.</p>
            </div>
            <div class="footer">
                ...

CSS

@charset"utf-8";

/* CSS Document */

/* Created By CaptainMcMarcus */

/* Heavily customized by Sjokomelk */
 @import url(http://fonts.googleapis.com/css?family=Open+Sans:300, 400, 600);
 html {
    height: 100%;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}
/* Clearing some default browser settings */
 * {
    border: 0px;
    margin: 0px;
    padding: 0px;
}
a:active {
    outline:none;
}
:focus {
    -moz-outline-style:none;
}
.clear {
    clear:both;
}
/* These parts can be easily changed to affect the design */
 body {
    color: #FFF;
    font-family:"Open Sans", Arial, Helvetica, sans-serif;
    background: url('images/bg.jpg') no-repeat;
    background-size: 100% auto;
    background-size: cover;
    background-attachment: fixed;
}
p {
    text-align: justify;
    font-size:16px;
}
p a {
    text-decoration: underline;
    color: #ea5353;
    text-decoration: underline;
}
p a:hover {
    text-decoration: none;
    color: #333;
}
/* Core Wrapper which we vertically align */
 .wrapper {
    width: 700px;
    height: auto;
    margin: 0 auto;
}
.box-wrap {
    width: 100%;
    height: auto;
    margin: 20px 0 0 0;
    -webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
}
.box-wrap h2 {
    width: 100%;
    height: auto;
    padding: 15px 0;
    text-align: center;
    background: url('images/header-bg.png') repeat center top;
    background-color: RGBA(42, 52, 59, 0.75);
}
.box-wrap p {
    font-family:'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 18px;
    padding: 15px 30px;
    overflow: hidden;
    text-align: justify;
    width: 640px;
    height: auto;
    background: #ffffff;
    color: #717171;
}
.icon-box {
    width: 210px;
    height: 210px;
    background: #FFF;
    margin: 20px 15px 20px 0;
    float: left;
    text-decoration: none;
}
.icon-box a {
    text-decoration:...

JavaScript

$(function() {
    $(window).on('resize', function() {
        $('.wrapper').css('margin-top', function() {
             return ($(document).height() - $(this).height()) / 2;
        });
    }).trigger('resize');
});