JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<div id="header">
    <h3>Soundcloud drop in link.</h3>
    <div id="Search"><input class="SearchInp" type="text" placeholder="Search on SoundCloud"></input><span class="Search-img"></span></div>
</div>
<div class="wrapper">
    <div class="drop-area"><b>Drop Link Here</b><input class="song-input" type="text" value="" placeholder="Enter SoundCloud Link In Here"></input></div>   
    <div id="song-container"></div>
    <br>
    <b class="song-name"></b>
    <div id="Search-ressult"><span class="ressult"></span></div>
</div>
<script src="http://connect.soundcloud.com/sdk.js"></script>

CSS

body {
font-family: sans-serif;
color: #D8D8D8;
min-width:551px;
background-color:#272727;
background-image: url(http://i.imgur.com/n0wwuob.png);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}

a{color:gray;transition:color .2s;text-decoration:none;}
a:hover{color:silver;transition:color .2s;}
.background{
position:fixed;
top:0px;
left:0px;
height:100%;
width:100%;
}

#header {
height: 2.5em;
position: absolute;
display: inline-flex;
top: 0px;
left: 0px;
width: 100%;
background: -webkit-linear-gradient(top,rgba(65, 65, 65, 1),rgba(15, 15, 15, 1)85%);
padding: 3px;
border-bottom: solid black 1px;
box-shadow: -2px -25px 26px 33px black;
min-width:551px;
z-index:999;
}

.wrapper{
width:100%;
margin:0 auto;
padding-top:5em;
}

#Search {
position: relative;
left:20%;
width: 12em;
background:rgba(255,255,255,0.2);
padding: 2px;
border:solid silver 1px;
border-radius:6px;
height: 1.7em;
}
.SearchInp {
border: solid gray 1px;
height: 22px;
padding-left: 5px;
margin-right: 6px;
}
.Search-img {
border: 0;
padding: 0;
background: url(https://a-v2.sndcdn.com/assets/images/header/header-icons-7351459d.png) 50% -359px no-repeat;
text-indent: 22px;
overflow: hidden;
width: 22px;
height: 19px;
position: absolute;
top:8px;
cursor:pointer;
}

.drop-area {
color: silver;
width: 8em;
border: solid 1px;
border-radius: 6px;
padding: 13px;
background: rgba(255,255,255,0.2);
margin:0 auto;
margin-bottom:20px;
    z-index:999;
}.drop-area:hover {
    background:rgba(255,255,255,0.1);
    cursor:pointer;
}

input.song-input {
z-index:999;
background: rgba(0, 0, 0, 0.4);
border: solid 2px orange;
border-radius: 3px;
width: inherit;
opacity:0;
display:none;
}

JavaScript

$(function(){
    jQuery.event.props.push('dataTransfer');
        
    SC.initialize({
      client_id: 'fedec30f3c4b01e7c023609eff5ba0f4'
    });
    
    var songUrl,
        i = 0;
    
    function getEmbed(){
        $.ajax({
            type: "GET",
            dataType: "json",
            url: 'https://soundcloud.com/oembed.json?url='+songUrl,
            success: function(data){
                
               var songName = data.title,
                   artistName = data.author_name,
                   artistPage = data.author_url;
                
                $('.song-name').html('Listening to - <a href="'+songUrl+'" target="_blank">'+songName+'</a> By <a href="'+artistPage+' target="_blank"">'+artistName+'</a>');
            }
        });
        SC.oEmbed(songUrl, {auto_play: true}, document.getElementById("song-container"));
    }
    
    $('.drop-area')
    .bind( 'dragenter dragover', false)
    .bind( 'drop', function(e){
        e.stopPropagation();
        e.preventDefault();
        songUrl = e.dataTransfer.getData('text');
        getEmbed();
    });
    
    $('.drop-area').click(function(){
        if(i === 0){
            $(this).animate({'width':'12em'}).css({'text-align':'center'});
            $('.song-input').css({'display':'block'}).animate({'opacity':'1'});
            i++;
        }
    });
    
    $('.SearchInp').keypress(function(e){
        if(e.keyCode == 13){
            search();
        }
    });
    
    $('.song-input').keypress(function(e){
        if(e.keyCode == 13){
            i=0;
            songUrl = $(this).val();
            getEmbed();
            $('.song-input').animate({'opacity':'0'}).css({'display':'none'});
            $('.drop-area').animate({'width':'8em'});
        }
    });
    
});