JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<div class="newfolder">
    <button type="button" title="" class="b5 foldnew btn btn-primary" >
    <div class="iconfile iccrfold" id="newfolder" title="{.!rwcrfolder.}"></div>
    Создать
    </button>
    
    
    
<div class="folderset">
<span>{.!rwcrfolder2.}</span><br />

    
    
    <form name="shout" class="chout" action="/" method="post">
    <input type='text' name='fldname' maxlength="50" size="25" value=''/>
    <input type='submit' name='createfolder' value='Создать' />
    <input type='submit' name='closefolder' value='Закрыть' />
</form>
    
    
</div>
    
    
</div>

CSS

.newfolder{position:relative;cursor:default;float:left;width:16px;text-align:left;}
.folderset{position:absolute;display:none;width:262px;min-width:262px;max-width:262px;left:-7px;top:28px;border:1px solid #ddd;padding:5px;font-size:0.9em;background:#fff;z-index:9999;border-radius:5px;}
.folderset span{color:black;}
.folderset input{font-size:12px;padding:4px;border:1px solid #cecece;background:#F6F6f6;padding-bottom:5px\0;outline:none;}
.folderset input:nth-child(2){border-radius:0}
.folderset input:nth-child(3){border-radius:0 5px 5px 0;}

.folderset input[type='text']{border-radius:5px 0 0 5px;width:110px;height:15px;color:rgba(0,0,0,0.4);}
.folderset input[type='submit']{margin-left:-5px;width:70px;cursor:pointer;margin-top:-1px;}


.folderset:before{position:absolute;display:block;content:"";border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #ddd;top:-9px;left:10px;-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg);}
.folderset:after{position:absolute;display:block;content:"";border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #fff;top:-8px;left:10px;-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg);}

JavaScript

$('.b5').click(function(){
    $('.folderset').show(100);
    $('.iccrfold').addClass('iccrfold1');});
$('.folderset input[type=submit]').click(function(){
    $('.folderset').hide(100);
    $('.iccrfold').removeClass('iccrfold1');
});