JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Parabeln zeichnen</title>
    </head>
    
    <body>
        
        <header>
            <span>shape: <input type="text" id="shape" name="shape" /></span>
            <span>offset-x: <input type="text" id="offset_x" name="offset_x" /></span>
            <span>offset-y: <input type="text" id="offset_y" name="offset_y" /></span>
            <span>pixel: <input type="text" id="pixel" name="pixel" /></span>
            <span>by Rick D.</span>
        </header>
        
        <section>
            <span>Drawing..</span>
            <canvas id="surface" width="100" height="100">(your browser doesn't support canvas)</canvas>
        </section>
        
    </body>
</html>

CSS

@charset 'UTF-8' ;

* {
    margin: 0 ;
    padding: 0 ;
    border: 0 none ;
    font: inherit ;
}

html,
body {
    width: 100% ;
    height: 100% ;
    font-family: 'Agency FB' ;
}

body > header,
body > section {
    position: absolute ;
    left: 50px ;
    right: 50px ;
}

body > header {
    padding: 10px 20px 0 20px ;
    top: 50px ;
    min-width: 650px ;
    height: 50px ;
    font-size: 1.3em ;
    background-color: lightblue ;
}

    body > header > span > input {
        width: 50px ; 
        text-align: right ;
        border-bottom: 1px dotted black ;
        background-color: inherit ;
    }

    body > header > span:after {
        content: "//" ;
        padding-right: 10px ;
        color: white ;
    }

    body > header > span:last-child {
        float: right ;
    }

body > section {
    top: 100px ;
    bottom: 50px ;
    min-width: 690px ;
    background-color: #eaeaea ;
}

body > section > span {
    position: absolute ;
    padding: 10px ;
    font-size: 1.3em ;
    bottom: 10px ;
    left: 10px ;
    background-color: white ;
}