JSFiddle - React, Tailwind, and code Playground
by Gwyn Milcote
HTML
<div class='tradecreate_holder'>
<div class='tradecreate_inner'>
<div class='tradecreate_title'>
+ Create Offer: Griffin Swap </div><div class='tradecreate_hide'>x</div>
<div class='tradecreate_section tradecreate_griff1'>
Choose your griffin:<br>
<div class='tradecreate_griff1img'></div>
<br><select id='tradecreate_mygriff'>
<option value='6'>hhh</option>
</select>
</div>
<div class='tradecreate_section tradecreate_swap'>
Enter the other Master's name. We'll check if they're open to swap offers.<br><input type='text' maxlength='30'><br>Yes! Now choose the griffin you'd like to receive.<br><button id='trade_submit_swap'>Submit Offer
</button>
</div>
<div class='tradecreate_section tradecreate_griff2'>
Choose their griffin:<br>
<div class='tradecreate_griff2img'></div>
<br><select id='tradecreate_theirgriff'>
<option value='6'>hhh</option>
</select>
</div>
</div>
<div id='trade_submit_result'>result...</div>
</div>
<p>now griff sale</p>
<div class='tradecreate_holder'>
<div class='tradecreate_inner'>
<div class='tradecreate_title'>
+ Create Offer: Griffin Sale </div><div class='tradecreate_hide'>x</div>
<div class='tradecreate_section tradecreate_griff1'>
Choose your griffin:<br>
<div class='tradecreate_griff1img'></div>
<br><select id='tradecreate_mygriff'>
<option value='6'>hhh</option>
</select>
</div>
<div class='tradecreate_section tradecreate_price'>
Choose the price.<br><input type='number' min='100' max='999999'> tokens<br><input type='number' min='0' max='99'> gems
</div>
<div class='tradecreate_section tradecreate_target'>
To make a private offer, enter the other Master's name. Leave this <b>blank</b> to keep the offer public.<br>
<input type='text' id='tradecreate_targetname' maxlength='30'>
<br>
<button>Submit Offer</button>
</div>
</div><div id='trade_submit_result'>result...</div>
</div>
<p>now item sale</p>
<div class='tradecreate_holder'>
<div class='tradecreate_inner'>
<div class='tradecreate_title'>
+ Create Offer: Item Sale...CSS
.tradecreate_holder {width:700px;height:330px;background-color:white;border:1px solid grey;border-radius:10px;background-image:url(https://orig00.deviantart.net/7246/f/2018/122/f/1/perchbg2_by_bronzehalo-dcagnjo.png);background-position:center;text-align:center;}
.tradecreate_holder div {box-sizing:border-box;}
.tradecreate_inner {position:relative;border:1px dotted green;height:300px;}
.tradecreate_title {position:absolute;top:5px;left:10px;height:40px;width:560px;font-size:24px;padding:5px;border:1px dotted red;text-align:left;}
.tradecreate_hide {position:absolute;top:5px;right:10px;height:30px;width:50px;border:1px solid red;border-radius:5px;}
.tradecreate_hide:hover {cursor:pointer;background-color:red;}
.tradecreate_section {background-color:rgba(255,255,255,0.7);border:1px solid white;border-radius:5px;padding:5px;text-align:center;position:absolute;top:60px;}
.tradecreate_griff1 {width:190px;height:220px;left:10px;}
.tradecreate_griff1img {width:180px;height:100px;background-color:yellow;}
.tradecreate_griff1img img {width:180px;height:100px;}
.tradecreate_swap {width:275px;height:220px;left:210px;}
.tradecreate_griff2 {width:190px;height:220px;right:10px;}
.tradecreate_griff2img {width:180px;height:100px;background-color:yellow;}
.tradecreate_griff2img img {width:180px;height:100px;}
.tradecreate_price {width:180px;height:220px;left:210px;}
.tradecreate_target {width:285px;height:220px;left:400px;}
.trade_submit_result {margin:auto;text-align:center;}