JSFiddle - React, Tailwind, and code Playground
HTML
<dl class="menu-items clearfix">
<dt class="product-name">Voluptate cillum fugiat.<br><span class="product-description">Cheese, tomato, mushrooms, onions.</span></dt>
<dd class="value">$50</dd>
<div></div>
</dl>
<dl class="menu-items">
<dt class="product-name">Voluptate cillum fugiat.<br><span class="product-description">Cheese, tomato, mushrooms, onions.</span></dt>
<dd class="value">$50</dd>
</dl>
<dl class="menu-items">
<dt class="product-name">Voluptate cillum fugiat.<br><span class="product-description">Cheese, tomato, mushrooms, onions.</span></dt>
<dd class="value">$50</dd>
</dl>
<dl class="menu-items">
<dt class="product-name">Voluptate cillum fugiat.<br><span class="product-description">Cheese, tomato, mushrooms, onions.</span></dt>
<dd class="value">$50</dd>
</dl>
<dl class="menu-items">
<dt class="product-name">Voluptate cillum fugiat.<br><span class="product-description">Cheese, tomato, mushrooms, onions.</span></dt>
<dd class="value">$50</dd>
</dl>
<dl class="menu-items">
<dt class="product-name">Voluptate cillum fugiat.<br><span class="product-description">Cheese, tomato, mushrooms, onions.</span></dt>
<dd class="value">$50</dd>
</dl>
<dl class="menu-items">
<dt class="product-name">Voluptate cillum fugiat.<br><span class="product-description">Cheese, tomato, mushrooms, onions.</span></dt>
<dd class="value">$50</dd>
</dl>
...
CSS
@charset "utf-8";
/* CSS Document */
@font-face
{
font-family:wcmanonegra-regular;
src:url(fonts/WCManoNegraBta.otf);
}
@font-face
{
font-family:aleo-regular;
src:url(fonts/Aleo-Regular.otf);
}
@font-face
{
font-family:aleo-bold;
src:url(fonts/Aleo-Bold.otf);
}
@font-face
{
font-family:aleo-lightitalic;
src:url(fonts/Aleo-LightItalic.otf);
}
body {
margin:0px auto;
padding:0px;
min-width:1100px;
max-width:1500px;
}
.clearfix
{
display:table;
content:"";
clear:both;
}
.header-container
{
background-color:#FFF;
padding:0 200px;
min-width:1100px;
max-height:110px;
}
.logo-container
{
float:left;
margin:0px;
max-height:110px;
max-width:230px;
font-family:wcmanonegra-regular;
font-size:40px;
}
.logo-container span
{
color:#F34949;
}
.logo-container a
{
display:inline-block;
padding-top:30px;
height:80px;
color:#3A3A3A;
text-decoration:none;
}
.navigation-container
{
float:right;
max-width:810px;
height:110px;
}
.navigation-container ul
{
margin:0px;
}
.navigation-container li
{
display:inline-block;
}
.navigation-container a
{
display:inline-block;
padding:46px 25px 47px 0px;
vertical-align:middle;
text-decoration:none;
font-family:aleo-regular;
font-size:14px;
color:#3B3B3B;
}
.theme-image-container
{
position:relative;
padding:0px;
margin:0px;
height:574px;
}
.theme-image-container img
{
z-index:1;
position:relative;
padding:0px;
margin:0px;
border-bottom:4px solid #F34949;
}
.theme-image-title
{ z-index:2;
position:absolute;
left:360px;
top:237px;
padding:0px;
margin:0px...