JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<input jw-validated-control="" required="" name="currentUrl" id="hmpg_quick_publish" type="text" class="form-control col-md-12 quick-publish-url-input ng-pristine ng-invalid ng-invalid-required ng-valid-pattern ng-touched" ng-model="quickPublishUrl.sourceurl" ng-change="updateState(quickPublishForm.models.currentUrl[0], null, quickPublishUrl)" ng-pattern="/^([0-9]+|\w+|\.|\+|\-)+:\/?\/?(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&amp;%@!\-\/]))?$/" placeholder="Paste URL" style="height: 36px">
    
    
    
    <button jw-form-submit="quickPublishForm" jw-submit-data="direct" type="submit" class="button button-block quick-publish-url-button" style="height: 36px" ng-disabled="quickPublishForm.submit.disabled">Embed</button>

CSS

element.style {
    height: 36px;
}
.quick-publish .form-control {
    display: inline-block;
}
.quick-publish input, .quick-publish select {
    padding: 2px 15px;
}
.form-control {
    box-shadow: none;
    padding: 6px 6px 4px;
    -webkit-transition: none;
    transition: none;
    border-radius: 2px;
}



element.style {
    height: 36px;
}
.quick-publish-url-button {
    color: #ffffff;
    fill: #ffffff;
    background-color: #ff0046;
    border: 2px solid #ff0046;
}
.button-block {
    display: block;
    width: 100%;
}