JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='plotinfo'>
<div class='plotinfo_contents'>


  <div class='plotinfo_illus'>
  plant pic
  </div>
  <div class='plotinfo_info'>
  
  <div class='plotinfo_text'>
  <div class='plotinfo_title'>
  <span style='float:left;'>Plot 5</span> <span style='float:right;'>Project name</span>
  </div>
  
  <div class='plotinfo_desc'>
  description
  </div>
  
  <div class='plotinfo_points'>
  Points: 5/18 (57%)
  </div>
  <div class='plotinfo_points'>
  Visited today: <b>Yes</b>
  </div>
  <br>(option to feed, fertilise or harvest, if not already done)<br><select>
  <option>hhh</option>
  </select> <button class='plotbtn'>apply</button><br><span id='plot_visit_result'></span>
  </div>
  
  <div class='plotinfo_text' style='margin-top:10px;min-height:40px;'>
  <button class='plot_sell_btn plotbtn'>
  Sell
  </button>
  If you'd like to clear this plot and start fresh, you can sell the contents to other gardeners. At this stage of development, you could fetch... about <b>555</b> tokens.<br><span id='plot_sell_result'></span>
  </div>
  </div>
  
</div>
</div>

CSS

div {box-sizing:border-box;}

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

.plotinfo_contents {border:0px solid yellow;position:relative;text-align:center;}

.plotinfo_illus {width:230px;min-height:250px;border:1px dotted green;display:inline-table;vertical-align:top;}
.plotinfo_info {width:600px;min-height:200px;display:inline-table;vertical-align:top;}

.plotinfo_text {background-color:rgba(255,255,255,0.7);padding:10px;border:1px solid white;border-radius:10px;}
.plotinfo_title {height:50px;font-size:28px;}
.plotinfo_desc {margin:10px auto;border:1px solid green;text-align:left;}
.plotinfo_points {background-color:white;min-width:250px;border:1px solid grey;border-radius:5px;padding:5px;text-align:center;font-size:20px;display:inline-table;vertical-align:middle;margin:10px;}

.plot_sell_btn {float:right;margin-left:20px;}

.plotbtn {width:100px;padding:5px;background-color:white;border:1px solid grey;border-radius:5px;margin:5px auto;cursor:pointer;}
.plotbtn:hover {transform:translate(0px,2px);}