JSFiddle - React, Tailwind, and code Playground

by sampottinger

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div id="welcome">
    <h1><img src="https://s3.amazonaws.com/gleap_projects_client_files/cdibase_large.png"> CDIbase</h1>
    <span id="tagline">Open source CDI management software for language acquisiton research.</span>
</div>
<div id="links-sect">
<a href="">setup</a> / <a href="">tutorial</a> / <a href="">license</a> / <a href="">authors</a> / <a href="">features</a> / <a href="">docs</a> / <a href="">github</a> / <a href="">contact us</a>
</div>
<div class="section" id="features-sect">
    <h3>CDIbase can help your lab</h3>
    <p>To facilitate scientific research, CDIbase manages communicative development inventory (CDI) data,</p>
    <ul>
        <li>supporting multiple types of CDIs across many studies / languages</li>
        <li>allowing authorized lab members to remotely access lab data with searching / filtering</li>
        <li>optionally providing parents with online CDI forms</li>
        <li>providing many more useful features for great good!</li>
    </ul>
</div>
<div class="section" id="get-started-sect">
    <h3>is easy to setup</h3>
    <div>You need some familiarity with running a website / using a terminal. Don't have that? Contact us.</div>
    <div id="instructions">
        $ git clone [email protected]:Samnsparky/cdibase.git
        <br>$ pip install -r requirements.txt
        <br>$ cd db
        <br>$ sqlite3 daxlab.db < create_local_db.sql<br>$ cd ..
        <br>$ mkdir uploads
        <br>$ python runserver.py
        <br>$ Let us know your that lab uses the application</div>
    <div id="instructions-preface">Want to use a virtual environment like the cool kids? Need to migrate your lab data? Checkout the <a href="https://github.com/Samnsparky/cdibase/blob/master/README.md">developer docs</a>.</div>
</div>
<div class="section" id="get-started-sect">
    <h3>is easy to learn</h3>
    We have tutorials for that!
</div>
<div class="section"...

CSS

body {
    width: 650px;
    margin: 50px auto;
}
#catch-image {
    margin: 20px 0;
}
#catch-image img {
    width: 650px;
    border: 1px solid #C0C0C0;
}
#features-sect h3 {
    margin-bottom: 20px;
}
#get-started-sect #instructions {
    padding: 10px;
    background-color: #E0E0E0;
    color: #505050;
    border-radius:5px;
}
#get-started-sect #instructions-preface {
    margin-bottom: 10px;
}
#links-sect {
    margin: 10px 0;
}
#welcome {
    font-size: 18px;
}
#welcome h1 {
    font-size: 60px;
}
#welcome img {
    height: 120px;
}
#welcome #tagline {
    font-weight: bold;
}
.feature {
    margin-bottom: 30px;
}
.feature #feature-title {
    font-weight: bold;
    margin-bottom: 5px;
}
.feature img {
    width: 150px;
    border: 1px solid #E0E0E0;
    float: left;
    margin-right: 10px;
}
.section {
    margin: 70px 0;
}