JSFiddle - React, Tailwind, and code Playground

by Luis Alcaraz

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<div>
  <div style="width:100px; height:100px; line-height:100px; border:1px solid #000; text-align:center;" onclick="$(this).hide(); $('#opcs').show();" id="producto">
    Producto
  </div>
  <div style="width:100px; height:100px; line-height:100px; border:1px solid #000; text-align:center; display:none;" onclick="$(this).hide(); $('#producto').show();" id="opcs">
    <div style="width:100px: height:50px;">
      <div style="width:50px; height:50px; line-height:50px;text-align:center; float:left" onclick="alert('uno'); $('#opcs').hide(); $('#producto').show();"> 1 </div>
      <div style="width:50px; height:50px; line-height:50px;text-align:center; float:right;" onclick="alert('dos'); $('#opcs').hide(); $('#producto').show();"> 2 </div>
    </div>
    <div>
      <div style="width:50px; height:50px; line-height:50px;text-align:center; float:left;" onclick="alert('tres'); $('#opcs').hide(); $('#producto').show();"> 3 </div>
      <div style="width:50px; height:50px; line-height:50px;text-align:center; float:right" onclick="alert('cuatro'); $('#opcs').hide(); $('#producto').show();"> 4 </div>
    </div>
  </div>
</div>