JSFiddle - React, Tailwind, and code Playground

by Renilson Meneguci

HTML

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block; padding-left: 17px;">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
        <div class="modal-content">
                <form method="post" action="#">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
                <h4 class="modal-title" id="myModalLabel" style="text-align: center;">Adicionar Cliente</h4>
            </div>
            <div class="modal-body">

                <div class="input-group col-lg-8">
                <div class="col-md-10 col-lg-10 col-xs-10">
                <div class="input-group">
                  <span class="input-group-addon glyphicon glyphicon-picture" id="basic-addon1"></span>
                   <input type="text" class="form-control" placeholder="Adicionar Imagem"/>
                </div>
               
                </div>
                <div class="col-md-2 col-lg-2 col-xs-2">
                  <span class="btn btn-success fileinput-button">
                        <i class="glyphicon glyphicon-plus"></i>
                    <input id="fileupload" type="file" name="files[]" multiple="">
                 </span>
                </div>
                </div>
  
                    
                
                <br>
                <div class="input-group">
                    <span class="input-group-addon glyphicon...

CSS

.modal {
}
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
}

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

.fileinput-button {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.fileinput-button input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    font-size: 200px;
    direction: ltr;
    cursor: pointer;
}