JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<div id="preview">
    <a href="#">&times;</a>
    Preview
</div>
<div id="upload">
    <ul class="options">
        <li><a href="#">Upload a File</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle">Use Cloud Storage</a>
            <ul class="dropdown-menu">
                <li><a href="#">Social #1</a></li>
                <li><a href="#">Social #2</a></li>
                <li><a href="#">Social #3</a></li>
                <li><a href="#">Social #4</a></li>
                <li><a href="#">Social #5</a></li>
            </ul>
        </li>
        <li class="line"><span>or</span></li>
    </ul>
    <div id="dragandrophandler"><img src="https://www.gameacademy.com/wp-content/uploads/2014/03/img-social-icons1.png" alt=""></div>
</div>

CSS

* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}
body {font-size: 80%; margin: 10px;}
a {text-decoration: none;}
#preview {border: 1px solid #ccc; background-color: #eee; float: left; width: 150px; height: 150px; margin: 0 15px 0 0; position: relative; padding: 10px; text-align: center; height: 150px;}
#preview a {position: absolute; right: 5px; top: 0; font-size: 1.2em;}
#upload {border: 1px dashed #ccc; float: left; width: 150px; padding: 10px; height: 150px;}
#upload .options {}
#upload .options > li {margin: 0 0 10px;}
#upload .options li a {background-color: #ccc; display: block; color: #000; padding: 5px; text-align: center; font-weight: bold;}
#upload .options li a:hover {background-color: #9f9;}
#upload .options > li:first-child a {background-color: #09f;}
.line {background: url("http://i.imgur.com/pnBNNGx.png") center center repeat-x transparent; text-align: center;}
.line span {background-color: #fff; padding: 0 4px;}
#dragandrophandler img {width: 50px; display: block; margin: 5px auto;}

#upload .options li.dropdown {position: relative;}
#upload .options li.dropdown ul {position: absolute; right: 0; top: -35px; width: 100px; margin-right: -105px;}
#upload .options li.dropdown.open > a {background-color: #9f9;}

.dropdown .dropdown-menu {display: none;}
.dropdown.open .dropdown-menu {display: block;}

JavaScript

$(function(){
    $(".dropdown-toggle").click(function(e){
        e.preventDefault();
        $(this).closest(".dropdown").toggleClass("open");
    });
});