HTML: 文字列処理系で役立つUI

CSSのみのtab + modal boxによるUIです。入出力欄を大き目に確保して、他を別領域へ追いやってます。

<!doctype html><html><head><title>?</title>
<style>
*{color:snow;font-family:FixedSys,monospace;font-size:1em;box-sizing:border-box;margin:0}
body{background:#212;height:100vh;overflow:hidden}
body,#t2t{display:flex;flex-direction:column}
label:hover,input:hover{background:#a6a}
input,label{background:#848;border:1px solid #c6c;border-radius:4px;cursor:pointer;display:inline-block;padding:3px 6px}

/*tab*/
.tabs{padding:0;width:100%;height:100%;float:none;list-style:none;position:relative}
.tabs>li{float:left;margin:0 2px 0 0}
.tabs>li>[type=radio],[type=file]{display:none}
.tabs>li>:checked+label{top:0;background:#424;border-bottom:0}
.tabs>li>:checked~.tabc{display:block}
.tabs>li>label{padding:9px;position:relative;top:4px;transition:.2s ease-in-out}
.tabs .tabc{background:radial-gradient(circle at center center,#a6a,#212);display:none;overflow:auto;height:calc(100% - 2em);width:100%;position:absolute;left:0;z-index:2}

/*text area*/
#it,#ot{background:transparent;border:1px solid #222;flex:1;overflow:auto;resize:none}
#t2t p,#log{flex:0 0 1em;width:100%}
p{text-align:center}

/*drop area*/
ol{border:2px dashed #caf;overflow:auto;background:#3236;position:absolute;top:1.5em;bottom:0;left:0;right:0}
ol:empty:before{content:"Drop files here";display:block;text-align:center;position:relative;top:45%}

/* modal main */
.modalson{
	background:#323c;
	overflow:hidden;
	position:fixed;
	transition:all .2s;
	z-index:999
}
.modalson>label+*{overflow:auto}
.modal>input{display:none}

.modalson>label[for]{
	display:block;width:100%;
	text-align:center
}
/* modal size */
.m-up{top:100%;left:0;right:0;bottom:1.25em}
.m-l2r{top:1px;width:100%;right:100%;bottom:1.25em}

/* modal switch */
.modal input:checked~.m-up{top:52%;bottom:1.3em}
.modal input:checked~.m-l2r{right:0}
</style></head><body>
<ul class=tabs>
	<li>
		<input type=radio name=tabs id=tab1 checked>
		<label for=tab1>Text</label>
		<form class=tabc id=t2t>
			<textarea id=it></textarea>
			<p><input type=button value=vary>
			<input type=button value=undo>
			<label for=opts>&#8801</label>
			<input type=reset value=reset></p>
			<textarea id=ot></textarea>
		</form>
	</li>
	<li>
		<input type=radio name=tabs id=tab2>
		<label for=tab2>File</label>
		<div class=tabc><p>
			<label id=kill>kill</label>
			<label><input type=file id=load>LOAD</label>
			<label id=save>Save</label>
			<label for=opts>&#8801</label>
			<ol id=flist></ol>
		</div>
	</li>
	<li>
		<input type=radio name=tabs id=tab3>
		<label for=tab3>detail</label>
		<div class=tabc>
			specification
		</div>
	</li>
</ul>
<div class=modal>
	<input type=checkbox id=opts>
	<div class="modalson m-up"><label for=opts>options</label>
		<form id=oform>something
		</form>
	</div>
</div>
<input id=log>

<input id=log>には結果報告用に設置。modal boxには動作設定項目をぶち込むと良いです(checkbox等)。一応file投下領域も設置してありますが、不要なら削除