JSFiddle - React, Tailwind, and code Playground

HTML

<section id="modalwindow">
  <div id="foodlist">
     <div class="links">
   	   <h1>Div 1</h1>
    	<ul>
        	<a href="#"><li>Example1    </li></a>
            <li><a href="#">Example2</a></li>
            <li><a href="#">Example3</a></li>
            <li><a href="#">Example4</a></li>
            <li><a href="#">Example5</a></li>
            <li><a href="#">Example6</a></li>
        	<li><a href="#">Example7</a></li>
            <li><a href="#">Example8</a></li>
        </ul>
        
    </div>
    </div>
        </section>
        
  <section id="modalwindow">
  <div id="food_details">
     <div class="details">
   	   <h1>Recipe</h1>
    	<ul>
        	<li>test </li>
            <li>test</li>
            <li>test</li>
       </ul>
        
    </div>
    </div>
        </section>

CSS

#modalwindow {
	width:320px;
	height: 381px;
	display:block;
	overflow:hidden;
	float:left;
	margin: 0 0 0 0;
	background-color:#EBEBEB;
	padding: 32px 0 0 25px;
}

#modalwindow h1 { 
    color:#000; 
    font-size:34px; 
    margin-bottom: 9px; 
}

#modalwindow a.button {
	color:#000001!important;
}

#foodlist ul {
    list-style:none; 
    margin:0;
}

#foodlist li {
	color: #c14887; 
    display:block; 
    border-bottom:1px solid #666; 
	padding: 8px 0 7px 0;
}

#foodlist a:link, #foodlist a:visited {

    text-decoration:none;
	color:#c14887; 

}

.links {
	float: left;
	width: 285px;
	margin: 0px;
	padding: 0px;
	height: 305px;
	overflow: hidden;
}

.links ul {
	margin:0;
	padding:0;
	
}

#foodlist .links li {
    float:left; 
    margin 0 20px 0 0; 
    width: 270px;
}

#foodlist .links li img{
	max-width: 100%;
	float: right;
	margin-top: -2px;
}



/*recipe details modal*/
.details li {
	margin-bottom:8px;
}

.details li:first-child
{
	font-weight:bold;
	font-size:18px;
}