JSFiddle - React, Tailwind, and code Playground

by Clear

HTML

<div style="height: 260px; width: 300px; margin: 50px auto auto auto;">
    <div class="download-topbox">
       <div class="download-topbox-image">
       </div> 
    </div>
    <textarea readonly="readonly" class="download-box">
http://dvdimagehosting.altervista.org/images/top.png
http://dvdimagehosting.altervista.org/images/top.png
http://dvdimagehosting.altervista.org/images/top.png
http://dvdimagehosting.altervista.org/images/top.png
    </textarea>
</div>

CSS

@-webkit-keyframes fade {
    0% { background: rgba(0,0,0,0.5); }
    50% { background: rgba(0,0,0,0.6); }
    100% { background: rgba(0,0,0,0.5); }
}

.download-topbox {
    background: transparent url(http://dvdimagehosting.altervista.org/images/top.png) no-repeat;
    height: 30px;
    width: 300px;
    border: none;
    position: relative;
    top: 9px;
}

.download-topbox-image {
    background: transparent url(http://dvdimagehosting.altervista.org/images/download.png);
    height: 17px;
    width: 88px;
    border: none;
    margin: auto auto;
    position: relative;
    top: 3px;
}
    
.download-box {
    background: rgba(0,0,0,0.5);
    height: 190px;
    width: 260px;
    -moz-box-shadow: inset 3px 3px 12px rgba(0,0,0,0.8);
    -webkit-box-shadow: inset 3px 3px 12px rgba(0,0,0,0.8);
    box-shadow: inset 3px 3px 12px rgba(0,0,0,0.8);
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    padding: 20px;
    color: #fff;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.8);
    border: none;
    resize:none;
}

.download-box:hover {
    cursor: pointer;
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1s;
    -moz-animation-name: fade;
    -moz-animation-duration: 1s;
    -o-animation-name: fade;
    -o-animation-duration: 1s;
}