JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<section id="widget">

    <h1>MyBB Cookie Settings Generator</h1>
    <p style="color:red; text-align:center;">Note: The generated values may not always be correct, but cover the vast majority of situations.</p>
    <table rows=2 cols=2>
        <tr>
            <td>
                <label>Board URL:</label>
            </td>
            <td>
                <input type="text" id="url" placeholder="https://www.my-awesome-forum.com:1234/mybb/index.php"/>
            </td>
        </tr>
    </table>

    <h3>
        Recommended Settings
    </h3>
    <div class="part_wrapper">
        <label>Cookie Domain:</label>
        <p id="domain_output"></p>
    </div>
    <div class="part_wrapper">
        <label>Cookie Path:</label>
        <p id="path_output"></p>
    </div>
    <div class="part_wrapper">
        <label>Secure Cookie Flag:</label>
        <p id="secure_flag_output"></p>
    </div>
</section>

CSS

h1 {
    font-size: 2.8em;
    text-align: center;
}

h3 {
    font-size: 2em;
    text-align: center;
}

body {
    padding: 30px;
}

label {
    font-size: 1em;
}

pre {
    margin: 0 !important;
    display: inline !important;
}

section {
    max-width: 700px;
    margin: 0 auto;
    border: 1px solid #ddd;
    padding: 30px;
    border-radius: 4px;
}

.part_wrapper {
    margin: 0 auto;
    text-align: center;
}

JavaScript

$(document).ready(function() {
    $("#url").on('keyup', function() {
    	var value = $(this).val();
      
      if (value.indexOf("://") == -1) {
      	value = "http://" + value;
      }
      
      var parser = document.createElement('a');
      
      parser.href = value;
      
      var domain = parser.hostname;
      
      if (domain.substring(0,4) == "www.") {
      	domain = domain.substring(4);
      }
      
      var path = parser.pathname;
      
      var segments = path.split("/");
      var lastSegment = segments[segments.length - 1];
      
      if (lastSegment.indexOf(".php") != -1) {
      	path = path.substring(0, path.length - lastSegment.length - 1);
      }
       
      var secure_flag = value.indexOf("https:") === 0;
       
      update_domain(domain, $("#domain_output"));
      update_path(path, $("#path_output"));
      update_secure_flag(secure_flag, $("#secure_flag_output"));
    });


    function update_domain(val, oe) {
        if (val === "localhost") {
            oe.html("");
            return;
        }

        val = "." + val;

        oe.html("<pre>" + val + "</pre>");
    }

    function update_path(val, oe) {
        if (val === "") {
            val = "/";
        }

        if (val.substring(0, 1) !== "/") {
            val = "/" + val;
        }

        if (val.substring(val.length - 1, val.length) !== "/") {
            val += "/";
        }

        oe.html("<pre>" + val + "</pre>");
    }

    function update_secure_flag(val, oe) {
        var output = val ? 'Yes' : 'No';
        
        if (val === false) {
        	output += '<br /><br /><a href="https://docs.mybb.com/1.8/administration/security/https/#secure-cookies">Are you using HTTPS?</a>';
			}

        oe.html(output);
    }    
});