JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
   
    <span class="miracle">Miracle</span><span class="meal">Meal</span>
   
</div>

<div id="main">
    <div class="mainmeal">
        
       Main Meal
        
    </div>
    <div id="olddeals">
        <div class="column1">
        </div>
        <div class="column2">
        <div>
        <div class="column3">
        </div>
        
    </div>
    
</div>

CSS

#header{
font-size: 24px;
background-color: #000; 
min-height: 25px;
 font-weight: bold;
   
    
}

#main {
   min-height: 300px;
   background-color: #b4db9b;
   width: 500px;
   position: relative;
   padding-top: 20px;
   
}

.miracle {
    color: #1e6023;
    
}
.meal{
    color: #fff;
    
}

.mainmeal{
    background-color: #fff;
    width: 400px;
    height: 150px;
    font-size: 40px;
    margin-left: auto;
    margin-right: auto;
    
   
    
    
   
    
    
}

.buy{
    color: #035012
}
}

JavaScript

d