JSFiddle - React, Tailwind, and code Playground

by codyc54321

HTML

<body>
    <div id="main">
        <h1>Setting up your new Django project</h1>
        <p>
            Let's start this class by creating a new Django project:
        </p>
        <div class="cl">$ django-admin startproject eat_it</div>
        <p>
            This will give us a management file, and our master folder:
        </p>
        <div class="highlight"><pre><span></span><span class="o">[</span>eat_it<span class="o">]</span> cchilders@cchilders-desktop:~/django_class/eat_it <span class="o">(</span>master<span class="o">)</span>
        $ ls
        eat_it  manage.py
        </pre></div>

        <p>
            The master folder, <code>eat_it</code>, takes the same name as our project, and has main files that determine the entry point:
        </p>

        <div class="highlight"><pre><span></span><span class="o">[</span>eat_it<span class="o">]</span> cchilders@cchilders-desktop:~/django_class/eat_it <span class="o">(</span>master<span class="o">)</span>
        $ ls eat_it/
        __init__.py  settings.py  urls.py  wsgi.py
        </pre></div>

        <p>
            We can follow the way Django works by starting at the <code>wsgi.py</code> entry point:
        </p>

        <div class="highlight"><pre><span></span><span class="sd">&quot;&quot;&quot;</span>
        <span class="sd">WSGI config for eat_it project.</span>

        <span class="sd">It exposes the WSGI callable as a module-level variable named ``application``.</span>

        <span class="sd">For more information on this file, see</span>
        <span class="sd">https://docs.djangoproject.com/en/1.10/howto/deployment/wsgi/</span>
        <span class="sd">&quot;&quot;&quot;</span>

        <span class="kn">import</span> <span class="nn">os</span>

        <span class="kn">from</span> <span class="nn">django.core.wsgi</span> <span class="kn">import</span> <span class="n">get_wsgi_application</span>

        <span class="n">os</span><span class="o">.</span><span...

CSS

body {
    background: #f0f0f0;
    margin-bottom: 70px;
    /*width: 80%;
    margin: 0 auto;*/
}

#main {
    width: 80%;
    margin: 0 auto;
}


h1 {
    text-align: center;
    margin-top: 35px;
    margin-bottom: 60px;
}

p {
    font-size: 20px;
    font-family: sans-serif;
}

.cl {
    margin: 38px;
    padding: 25px;
    background: #f8f8f8;
    font-family:DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
    font-size: 12px;
  }

.fake-url {
    color: blue;
}

.one-line {
    white-space:nowrap;
    overflow:hidden;
    
}

/* Now for the pygments auto-generated */


.highlight .hll { background-color: #ffffcc }
.highlight { margin: 38px; padding: 25px; }
.highlight  { background: #f8f8f8; }
.highlight .c { color: #408080; font-style: italic } /* Comment */
.highlight .err { border: 1px solid #FF0000 } /* Error */
.highlight .k { color: #008000; font-weight: bold } /* Keyword */
.highlight .o { color: #666666 } /* Operator */
.highlight .ch { color: #408080; font-style: italic } /* Comment.Hashbang */
.highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #BC7A00 } /* Comment.Preproc */
.highlight .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */
.highlight .c1 { color: #408080; font-style: italic } /* Comment.Single */
.highlight .cs { color: #408080; font-style: italic } /* Comment.Special */
.highlight .gd { color: #A00000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #FF0000 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #0044DD }...