JSFiddle - React, Tailwind, and code Playground

HTML

<label for="name">Campaign name</label>
<input type="text" name="name" id="name" value="" maxlength="50" />

<label for="url">Website URL</label>
<div class="fake-input">
    <input type="text" name="url" id="url" value="" maxlength="30" />
    <p class="fake-input">www.website.com/</p>            
</div>

<label for="description">Description</label>
<textarea class="wysiwyg" name="description" id="description"></textarea>

CSS

body {
    line-height: 1;
    color: #444;
    background-color: #fcfcfc;
    font: 15px tahoma, arial, helvetica, sans-serif;
}
label {
    display: block;
    margin: 15px 5px 3px 0;
    font-weight: bold;
    }

input[type=text], input[type=password] {
    font-size: 17px;
    border: 1px solid #bbb;
    width: 400px;
    padding: 8px 5px;
    margin-right: 15px;
    }
textarea {
    font: 17px tahoma, sans-serif;
    color: #444;
    border: 1px solid #bbb;
    width: 550px;
    height: 160px;
    padding: 8px 5px;
    }
input[type=text]:focus, input[type=password]:focus, input[type=checkbox]:focus, textarea:focus, select:focus {
    border: 1px solid #d9c14f;
    }
input[type=text]:hover, input[type=password]:hover, input[type=checkbox]:hover, textarea:hover, select:hover {
    border: 1px solid #d9c14f;
    }
.fake-input {
    position: relative;
    }
.fake-input p {
    position: relative;
    display: inline-block;
    z-index: 3;
    top: -30px;
    left: 8px;
    color: #777;
    font-size: 17px;
    }
.fake-input input {
    padding-left: 150px !important;
    width: 250px;
    }