JSFiddle - React, Tailwind, and code Playground

by Debarupa

HTML

<div class="bg">
<div class="newhomecircle">
<a class="growerbtn" href="#">

      <span class="growerinfo">
     <h3>John Smith</h3>
     <div>123 Test Dr., Sacramento, CA</div>

    </span></a>

    <a class="farmbtn" href="">
      <span class="farminfo">
         <h4>John Smith</h4>
          <div>123 Test Dr., Sacramento, CA</div>
      </span>
    </a>

    <a class="configurebtn" href="#"></a>

    <a class="cropplanviewerbtn" href=""></a>

    <a class="applicationplanningbtn" href="#"></a>

    <a class="neighborhoodbtn" href="#"></a>

    <a class="resourcesbtn" href="#"></a>
  </div>
</div>

CSS

.bg {height:100%; width:100%; background-color: #000000;top:0; right:0; position:absolute;}
.newhomecircle {background: url("http://test.cdms.net/Advisor/Vision/Content/images/Home/dotted-line.png") no-repeat scroll center center transparent; width: 753px; height:400px; display:block; position:absolute; left:20%; top:20%;}

.growerbtn {background: url("http://test.cdms.net/Advisor/Vision/Content/images/Home/grower_active.png") no-repeat scroll transparent; width: 226px; height:222px; position: absolute; top:-10%; left:-14%; text-decoration:none !important;}

.growerinfo { text-align:center; zpadding-left:1em; zpadding-top:1.5em; color:#fff; text-shadow: 0 0 0 #000; margin: 0 auto;}
.growerinfo h3 {padding-top:2em;}
.growerinfo div { font-size: 0.8em;}

.farmbtn  {background: url("http://test.cdms.net/Advisor/Vision/Content/images/Home/farm_active.png") no-repeat scroll transparent; width: 181px; height:177px; position: absolute; top:60%; left:-10%; text-decoration:none !important;}
.farminfo { text-align:center; zpadding-left:1em; color:#fff; text-shadow: 0 0 0 #000; margin: 0 auto;}
.farminfo h4{ padding-top:1.5em; padding-left: 0.5em; padding-right: 0.5em;}
.farminfo div { font-size: 0.8em;}

.configurebtn {background: url("http://test.cdms.net/Advisor/Vision/Content/images/Home/Configure_inactive.png") no-repeat scroll transparent; width: 152px; height:152px; position: absolute; top:35%; left:40%; }

.cropplanviewerbtn {background: url("http://test.cdms.net/Advisor/Vision/Content/images/Home/Crop-Planning_inactive.png") no-repeat scroll transparent; width: 152px; height:152px; position: absolute; top:-10%; left:65%;}

.neighborhoodbtn {background: url("http://test.cdms.net/Advisor/Vision/Content/images/Home/Neighborhood_disabled.png") no-repeat scroll transparent; width: 152px; height:152px; position: absolute; top:35%; left:90%;}

.resourcesbtn {background: url("http://test.cdms.net/Advisor/Vision/Content/images/Home/Resources_disabled.png") no-repeat scroll...