JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<div class="config-generator">
    <div class="form-group wallet-address">
        <label for="wallet-address">Wallet Address</label>
        <input type="text" id="wallet-address" placeholder="1Auhps1mHZQpoX4mCcVL8odU81VakZQ6dR">
    </div>
    
    <div class="form-group">
        <label for="algorithm">Algorithm</label>
        <select id="algorithm">
            <option>c11</option>
            <option>lyra2v2</option>
            <option>lyra2z</option>
            <option>neoscrypt</option>
            <option>nist5</option>
            <option>phi</option>
            <option>quark</option>
            <option>scrypt</option>
            <option>sha256</option>
            <option>skein</option>
            <option>skunk</option>
            <option>tribus</option>
            <option>x11</option>
            <option>x13</option>
            <option>x16r</option>
            <option>x16s</option>
            <option>x17</option>
            <option>xevan</option>
            <option>yescryptR16</option>
        </select>
    </div>
    
    <p class="result">
        -o stratum+tcp://blockmasters.co:<span class="port">PORT</span> -u <span class="wallet-address">wallet_address</span> -p c=<span class="coin">BTC</span>
    </p>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Roboto');

* {
    box-sizing: border-box;
}

html {
    font-size: 10px;
}

body {
    background-color: #eeeeee;
    padding: 1em;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 1.6rem;
}

// ------------------------------------------ //

.config-generator {
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2),
                0 2px 2px 0 rgba(0,0,0,0.14),
                0 1px 5px 0 rgba(0,0,0,0.12);
    margin-bottom: 2em;
    padding: 1em;
    
    label {
        display: block;
        font-size: 1.2rem;
        margin: 0 0 0.5em 0;
    }
    
    input, select {
        display: inline-block;
        border-radius: 2px;
        border: 1px solid #ccc;
        padding: 0.5em;
    }
    
    .form-group {
        display: inline-block;
        margin: 0 0.5em 0.5em 0;
        
        &.wallet-address {
            display: block;
            margin-right: 0;
            
            input {
                width: 100%;
            }
        }
    }
    
    .result {
        display: block;
        font-family: "Courier New", Courier, monospace;
        font-size: 1.2rem;
        padding: 2.5em 1em 1em 1em;
        border: solid 1px rgba(51,51,51,0.12);
        background: rgba(246,246,246,0.2);
        position: relative;
        border-radius: 2px;
        
        &::before {
            content: 'Result';
            position: absolute;
            padding: 1px 5px;
            background: #e8e6e3;
            top: 0;
            left: 0;
            color: #555;
            border: solid 1px rgba(51,51,51,0.12);
            border-top: none;
            border-left: none;
            border-radius: 0 0 2px 0;
        }
    }
}