JSFiddle - React, Tailwind, and code Playground

by Salvador Dali

HTML

<span class="editableArea">
    <div class="editableArea-close" title="remove text">X</div>
    <div class="editableArea-content">
        <div class="video">
            <div class="videoEmpty">
                Enter the link to your video
                <input type="text" placeholder="http://youtu.be/5LvdJ4lXm_c" />
            </div>
        </div>
    </div>
</span>

CSS

.video{
    margin: 10px auto;
    width:330px;
    height:250px; 
    border: 2px dashed #888;
}
.videoEmpty{
    margin-top: 40px;
    text-align: center;
    font-size: 20px;
    color: #999;
}
.editableArea-content{
    border: 2px dashed #bbb;
    -moz-border-radius: 10x;
    -webkit-border-radius: 10x;
    border-radius: 10px;
    margin-top:20px;
}
.editableArea-close{
    float:right;
    position:relative;
    margin-top: 25px;
    margin-right: -10px;
    cursor: pointer;
}