JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='nestcreate_box'>

<div class='nestcreate_half'>
<div class='nestcreate_title'>+ Create New Nest</div>
Creating a nest is free. You can edit all the details later, if you want.

<p><b>Location</b> - choose the background.<br><div class='centre'>
<div class='nestcreate_loc' style='background-image:url(http://griffusion.elementfx.com/pics/bgs/nest1.jpg);' data-name='Hilltop' data-num='1'></div>
<div class='nestcreate_loc' style='background-image:url(http://griffusion.elementfx.com/pics/bgs/nest2.jpg);' data-name='Valley' data-num='2'></div>
<div class='nestcreate_loc' style='background-image:url(http://griffusion.elementfx.com/pics/bgs/nest3.jpg);' data-name='Desert Heights' data-num='3'></div>
<div class='nestcreate_loc' style='background-image:url(http://griffusion.elementfx.com/pics/bgs/nest4.jpg);' data-name='Beach' data-num='4'></div>
<div class='nestcreate_loc' style='background-image:url(http://griffusion.elementfx.com/pics/bgs/nest5.jpg);' data-name='Mossy Forest' data-num='5'></div>
<div class='nestcreate_loc' style='background-image:url(http://griffusion.elementfx.com/pics/bgs/nest6.jpg);' data-name='Lake Rock' data-num='6'></div>
<div class='nestcreate_loc' style='background-image:url(http://griffusion.elementfx.com/pics/bgs/nest7.jpg);' data-name='Stream' data-num='7'></div>
<div class='nestcreate_loc' style='background-image:url(http://griffusion.elementfx.com/pics/bgs/nest8.jpg);' data-name='Beach Cave' data-num='8'></div>
<div class='nestcreate_loc' style='background-image:url(http://griffusion.elementfx.com/pics/bgs/nest9.jpg);' data-name='Cavern' data-num='9'></div>
<div class='nestcreate_loc' style='background-image:url(http://griffusion.elementfx.com/pics/bgs/nest10.jpg);' data-name='Waterfall Ravine' data-num='10'></div>
<div class='nestcreate_loc' style='background-image:url(http://griffusion.elementfx.com/pics/bgs/nest11.jpg);' data-name='Lake Arch' data-num='11'></div>
<div class='nestcreate_loc'...

CSS

.nestcreate_box {width:870px;box-sizing:border-box;background-image:url(https://orig00.deviantart.net/7246/f/2018/122/f/1/perchbg2_by_bronzehalo-dcagnjo.png);background-position:center;padding:5px;border:1px solid grey;border-radius:10px;}

.centre {text-align:center;}
.sel {border:2px solid yellow;}

.nestcreate_half {width:410px;padding:5px 10px;border:1px dotted red;display:table-cell;}
.nestcreate_title {height:50px;font-size:25px;}
.nestcreate_loc {width:70px;height:40px;background-color:green;box-sizing:border-box;border-radius:5px;margin:3px;display:inline-table;vertical-align:top;cursor:pointer;background-position:center;background-size:cover;}

.nestcreate_disp {padding:5px;width:140px;box-sizing:border-box;background-color:green;display:inline-table;cursor:pointer;margin:10px 5px;border-radius:5px;}

.nestcreate_ench {width:140px;height:40px;display:inline-table;margin:3px;box-sizing:border-box;padding:5px;background-color:green;border-radius:5px;cursor:pointer;}

.nestcreate_submit {width:150px;font-size:20px;padding:5px;background-color:white;border:1px solid grey;border-radius:5px;margin:auto;text-align:center;}

JavaScript

var disp = 1; var loc = 1; var spell = 1;

$('.nestcreate_loc').mouseover(function(){
var locname = $(this).data('name');
$('.nestloc_name').html('<b>'+locname+'</b>');
});

$('.nestcreate_loc').click(function(){
$('.nestcreate_loc').removeClass('sel');
$(this).addClass('sel');
});

$('.nestcreate_disp').click(function(){
disp = $(this).data('disp');
$('.nestcreate_disp').removeClass('sel');
$(this).addClass('sel');
});

$('.nestcreate_ench').click(function(){
  var afford = $(this).data('afford');
  if(afford == 'yes'){
spell = $(this).data('spell');
$('.nestcreate_ench').removeClass('sel');
$(this).addClass('sel');
  }
});

$('.nestcreate_submit').click(function(){

});