JSFiddle - React, Tailwind, and code Playground

by karimkhan

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
                            <div class="input-button-collection inside-collection">
                                <div id="input-collection" class="input-group input-group-lg">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-link"></i></span>
                                    <input id= "url-input-box" type="url" class="form-control" name = "url" placeholder="http://www.example.com">
                                    <span class="input-group-btn">
                                        <button id="submit-url-btn" class="btn btn-success" type="button">Go!</button>
                                    </span>
                                </div>
                                <div id="error-msg" class="help-block">
                                    <i class="glyphicon glyphicon-exclamation-sign"></i> 
                                  Input is invalid
                                </div>

                            </div>

CSS

.input-button-collection {
                display: block;
                margin-left: 24%;
                margin-right: 24%;
            }

            .custom-input-button {
                text-align: center;
                position:absolute;
                margin-left:33.7%;
                margin-top:-7.1%;
            }


            .input-header {
                color: #7F7F7F;
                text-align: center;
                margin: auto;
            }

            .page-header-text {
                padding-left: 15px;
                padding-top: 20px;
                padding-bottom: 10px;
                margin: 0px;
		color:fff;
		font-size: 36px;
		font-family: Arial;
            }

            .preview-container {
                margin: auto;
            }

            .inside-collection {

            }

JavaScript

$( document ).ready(function() {
            $('#error-msg').hide();

        }