JSFiddle - React, Tailwind, and code Playground

by Alexandre Simoes

HTML

<span class="menuItem satin relative pointer inlineFlex column vertical-top textCenter">
<img src = "../assets/images/food1.jpg"  class= "block menus" Width= "320px;">
<div class= "relative flex1 hair grey-hair">
<div class="menu1 menus">
<h3 class= "textCenter OldStandard"> Soup </h3>
<hr>
</div>

<div id="abc"> 
<div class="selectionOverlay fixed flex">
<div class="cont-cont">
<article class="relative infoBox OpenSansLight satin">
<span class="hairline"></span>
<h1 class="OldStandard textCenter darkRed">Soup</h1>
<hr>
<br>
<span class="relative orderBtn btnOrange block hCentered"> NOW</span>

<span class="block textCenter tabs flex justifyBetween">
<ul class="tabs">
  <li class="uppercase pointer"><a href="#details">details</a></li>
  <li class="uppercase pointer"><a href="#ingredients">ingredients</a></li>
  <li class="uppercase pointer"><a href="#nutrition">nutrition</a></li>
  <li class="uppercase pointer"><a href="#instructions">instructions</a></li>
</ul>
</span>
<div id="tabContent" class="relative">
  <span class="shadow block absolute"></span>
  <span class="contentBox block">
<div class="tab1 active" id="details">
<p class="textLeft details">
guyikuikljilkjikly
</p>
</div>
<div class="ingredients tab1 " id="ingredients">
<span class="block OldStandard element">
<h2 class="block textCenter OldStandardItalic">Soup</h2>
<div class="flex rowWrap justifyBetween OpenSansLight noheight">
<span class="ingredient textCenter">potatoes</span>
  <span class="ingredient textCenter">carrots </span>
</div>
</span>


<div class="flex nuts justifyCenter rowWrap tab1" id="nutrition">
  <span class="block element width100">
<h2 class="textCenter OldStandardItalic">Soup</h2>
<span class="nut flex width100 justifyBetween first">
<span class="OldStandard">
<span>Calories</span>
  </span>
  </span>
  </span>
</div>
<div class="instructions tab1" id="instructions">
  <span class="block section components textLeft">
<h2 class="textCenter...

JavaScript

$(document).ready(function(){
    $(".menus").click(function(){
        $("#abc").show();
        $('body').css('overflow', 'hidden');
    });
    $("#close").click(function(){
        $("#abc").hide();
        $('body').css('overflow', 'scroll');
    });

});

$(function() {
	  $('.tabs a').click(function(e) {
	    e.preventDefault();
	    let target = $(this).attr('href');
	    $('.tab1.active, .tabs li.active').removeClass('active');
	    $(target).add($(this).parent()).addClass('active');
	  });
	  $('.tabs li:first-child').addClass('active');
	});