JSFiddle - React, Tailwind, and code Playground

by bittersweetryan

HTML

<div id="container">
    <div id="close">X</div>
    <div id="preview">
        <div id="images">
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </div>
    </div>
    <div id="main">Hello World</div>
</div>

CSS

#container{
    width: 400px;
    height: 200px;
    -webkit-box-shadow: 11px 11px 15px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    11px 11px 15px rgba(50, 50, 50, 0.75);
    box-shadow:         11px 11px 15px rgba(50, 50, 50, 0.75);
    position: absolute;
}

#close{
    position: absolute;
    right: -5px;
    top: -5px;
    background: rgb(255,255,255);
}

#preview{
    width: auto;
    margin: 0px 0px 0px 0px;
    border-bottom: 2px solid black;
    height: 25px;
}

#images{
    width: 100%;
    text-align: center;
}

#main{
    background-color: rgb(155,155,155);
    margin: 0px 0px 0px 0px;
    height: 175px;
}

JavaScript

$("#close").on('click',function(){
    $(this).parent().fadeOut();
});